Simple Card In Tailwind CSS | No Vanilla CSS Used! | Very Easy
Hello Everyone! Welcome To Frontend Everything Blog. Here I daily share web development tips/tricks and astounding projects. Today We are going to make Tailwind CSS Card! No external CSS used.
I am Piyush, Sharing About Web development Daily. You can also checkout me at : @frontendeverything.
What we are going to create?
First, you have to put the tailwind CSS CDN!
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">as
As we are creating this Card In CSS Framework so we have to put a cdn of CSS framework ☝
Then You have to code 🤩
<div class="card mt-5 ml-10 ">
<!--Card 1-->
<div class="max-w-sm rounded overflow-hidden shadow-2xl bg-gray-100">
<img class="w-full" src="https://static.vecteezy.com/system/resources/previews/001/882/528/non_2x/beautiful-landscape-pine-forest-with-mesmerizing-mountain-views-free-vector.jpg" alt="Mountain">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Red Heaven</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-gray-100 mr-2 mb-2 cursor-pointer hover:bg-red-600 transition delay-50 duration-300 ease-in-out">#tailwind</span>
<span class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-gray-100 mr-2 mb-2 cursor-pointer hover:bg-red-600 transition delay-50 duration-300 ease-in-out">#frontendeverything</span>
</div>
</div>
</div>
You Can Check The Project On Codepen Also 🔥
See the Pen Card In Tailwind CSS by Piyush (@CodedByPiyush) on CodePen.
Thank you for watching The blog. if you gain any knowledge consider following me on Instagram - @frontendeverything .