Create Beautiful Card Using Tailwind Css

I am building a few templates and if I build some small component I love sharing the part of the code.

So, I used the flow bite plugin in Tailwind CSS to create this amazing card.

Here’s the code that you can use.

 <div class=" border-gray-400 h-auto w-64 rounded-sm sticky">
                    <div
                        class="tagsDiv flex flex-wrap gap-2 p-2 hover:shadow-lg transition-all ease-in-out bg-transparent rounded-md text-gray-700 border mt-2">
                        <div class="author">
                            <div class="img-div flex flex-row justify-center mt-2">
                                <img src="./public/images/me.jpg" class="w-16 rounded-full border" alt="">
                            </div>
                            <div class="author-name flex items-center justify-center text-end font-bold">
                                <p class="name px-2 mt-3">Robin</p>
                            </div>
                            <div class="description p-2 text-sm text-center">
                                Flowbite is an open-source library of UI components built with the utility-first
                            </div>
                            <div class="social flex justify-center gap-3 py-2">
                                <a href="">
                                    <img src="./public/images/github.png" class="w-10 border p-1 rounded-full" alt="">
                                </a>
                                <a href="">
                                    <img src="./public/images/youtube.png" class="w-10 border p-1 rounded-full" alt="">
                                </a>
                                <a href="">
                                    <img src="./public/images/twitter.png" class="w-10 border p-1 rounded-full" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

Listing Card

You can use the below card as a listing card and you can find the source code below.

<ul
                        class="p-2 bg-transparent rounded-md text-gray-700 border shadow-sm mt-3 hover:shadow-lg transition-all ease-in-out">
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            Laravel</li>
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            Linux</li>
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            Livewire</li>
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            Javascript</li>
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            ReactJs</li>
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            PHP</li>
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            General</li>
                        <li
                            class="p-3 text-left py-2 px-3 rounded-md hover:bg-gray-100 transition-all duration-300 ease-in-out cursor-pointer">
                            Tech Talks</li>
                    </ul>

I hope it will help you in fast development. Thanks.