Creating Beautiful Cards with Tailwind CSS

In this article, we will explore how to create stunning cards using Tailwind CSS. Although we’ll be using React in the examples, the primary focus is to showcase the power of Tailwind and its ability to achieve impressive results with just a few lines of code.

Let’s start with a simple card:

  <div class='w-64 p-4 rounded-lg bg-two flex flex-col space-y-8'>
            <div class='flex justify-between items-center'>
                <div class='flex space-x-2 items-center'>
                    <div class='w-8 h-8 rounded-full bg-gray-400'></div>
                    <div class='text-sm font-medium'>TailwindBlog</div>
                </div>
                <StarIcon class='w-6 h-6 text-yellow-50' />

            </div>
            <div class='flex flex-col space-y-2 justify-center px-6'>
                <h2 class='text-2xl font-bold text-center'>To Simplyfy the way you work</h2>
                <div class='flex justify-center items-center py-12'>
                    <img src='../../public/undraw_location_review_d5qn.svg' class='h-40 w-40' />

                </div>
                <h2 class='text-xs font-normal text-slate-600 '>
                    some more text for showing some description or long text
                </h2>


            </div>
            <button class='rounded-lg shadow-lg bg-black flex justify-center 
            text-sm
            items-center py-2 text-slate-300 font-semibold'>
                Get Started
            </button>
        </div>

By using this small snippet, we can easily create a simple and beautiful card. Now, let’s generate another example:

  <div class='w-64 p-4 rounded-lg bg-three flex flex-col space-y-4'>
             <div class='flex justify-between items-center'>
    <div class='flex space-x-2 items-center'>
        <div class='w-8 h-8 rounded-full bg-gray-800'></div>
        <div class='text-sm font-medium'>TailwindBlog</div>
    </div>
    <BellIcon class='w-6 h-6 text-gray-700' />

</div>
        <div class='flex flex-col space-y-1'>

            <h1 class='text-xl font-bold'>Task For Today</h1>
            <div class='flex space-x-2'>
                <StarIcon class='w-4 h-4 text-yellow-500' />
                <h4 class='text-xs text-slate-600'>5 Available</h4>
            </div>
            <div class='py-4'>
                <input type='text' class='rounded-lg w-full bg-white flex justify-center 
                text-xs items-center p-3 text-slate-600 ' placeholder='Search' />
            </div>
        </div>
        <div class='flex flex-col space-y-2'>
        <div class='flex  space-x-2 items-center justify-between'>
            <h3 class='text-md font-semibold'>Last Connections</h3>
            <h4 class='text-xs'>See all</h4>
            </div>
        <div class='flex space-x-3 items-center'>
        <img  src='https://xsgames.co/randomusers/avatar.php?g=female'
                 alt='profile' class='w-8 h-8 rounded-full' />
                 <img  src='https://xsgames.co/randomusers/avatar.php?g=female'
                 alt='profile' class='w-8 h-8 rounded-full' />
                 <img  src='https://xsgames.co/randomusers/avatar.php?g=female'
                 alt='profile' class='w-8 h-8 rounded-full' />
                 <img  src='https://xsgames.co/randomusers/avatar.php?g=female'
                 alt='profile' class='w-8 h-8 rounded-full' />
                <div class='w-8 h-8 text-xs rounded-full bg-gray-200 text-slate-500 flex items-center justify-center'>
                    +5
                </div>
            </div>
    </div>
        </div>