Create Beautiful Card Using Tailwind Css | LaraChamp
Back to Blog 3 min read

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. http://localh...

Gurpreet Kait

Gurpreet Kait

Author

Share:
Link copied to clipboard!

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.

http://localhost/storage/uploads/pika-1701619519551-1x-1024x577.png alt="" class="wp-image-962"/>

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.

http://localhost/storage/uploads/image-1.png alt="" class="wp-image-964"/>
<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.

Enjoyed this article?

Subscribe to get more Laravel tutorials and development tips like this one

No spam, ever. Unsubscribe at any time.

Articles Tags