Home
Mike Varen
Portfolio with buttons

Portfolio with buttons

Portfolio with buttons. Portfolio item has image, title and description.

This tailwind example is contributed by Mike Varen, on 07-May-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Card Feature showcase

Author Mike Varen

2.7k

Fork Fullscreen

<section id="portfolio" class="portfolio-section py-16 px-4">
    <div class="container mx-auto">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold mb-4">Portfolio Showcase</h2>
            <p class="text-lg text-indigo-500 font-semibold">Discover our latest projects and success stories</p>
        </div>
        <div class="flex flex-col md:flex-row items-center mb-8">
            <button class="filter-button bg-indigo-500 hover:bg-pink-500 px-4 py-2 mr-2 mb-2 text-white rounded">All</button>
            <button class="filter-button  bg-indigo-500 hover:bg-pink-500 px-4 py-2 mr-2 mb-2 text-white rounded">Web Design</button>
            <button class="filter-button  bg-indigo-500 hover:bg-pink-500 px-4 py-2 mr-2 mb-2 text-white rounded">App Development</button>
            <button class="filter-button  bg-indigo-500 hover:bg-pink-500 px-4 py-2 mr-2 mb-2 text-white rounded">Branding</button>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden">
                <a href="/project-1">
                    <img class="w-full h-60 object-cover" src="https://spacema-dev.com/elevate/assets/images/portfolio-1.png" alt="Project 1">
                    <div
                        class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-indigo-500 to-pink-500 opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                    </div>
                    <div class="p-4 flex flex-col items-center justify-between relative z-10">
                        <h3 class="text-lg font-medium text-txt group-hover:text-gray-dark">Awesome Project 1</h3>
                        <span class="text-sm font-bold text-pink-500 group-hover:text-indigo-500">App development</span>
                    </div>
                </a>
            </div>
            <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden">
                <a href="/project-2">
                    <img class="w-full h-60 object-cover" src="https://spacema-dev.com/elevate/assets/images/portfolio-2.png" alt="Project 1">
                    <div
                        class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-indigo-500 to-pink-500 opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                    </div>
                    <div class="p-4 flex flex-col items-center justify-between relative z-10">
                        <h3 class="text-lg font-medium text-txt group-hover:text-gray-dark">Awesome Project 2</h3>
                        <span class="text-sm font-bold text-pink-500 group-hover:text-indigo-500">Branding</span>
                    </div>
                </a>
            </div>
            <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden">
                <a href="/project-3">
                    <img class="w-full h-60 object-cover" src="https://spacema-dev.com/elevate/assets/images/portfolio-3.png" alt="Project 1">
                    <div
                        class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-indigo-500 to-pink-500 opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                    </div>
                    <div class="p-4 flex flex-col items-center justify-between relative z-10">
                        <h3 class="text-lg font-medium text-txt group-hover:text-gray-dark">Awesome Project 3</h3>
                        <span class="text-sm font-bold text-pink-500 group-hover:text-indigo-500">Web Design,
                            Branding</span>
                    </div>
                </a>
            </div>
            <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden">
                <a href="/project-4">
                    <img class="w-full h-60 object-cover" src="https://spacema-dev.com/elevate/assets/images/portfolio-4.png" alt="Project 1">
                    <div
                        class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-indigo-500 to-pink-500 opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                    </div>
                    <div class="p-4 flex flex-col items-center justify-between relative z-10">
                        <h3 class="text-lg font-medium text-txt group-hover:text-gray-dark">Awesome Project 4</h3>
                        <span class="text-sm font-bold text-pink-500 group-hover:text-indigo-500">Web Design,
                            Branding</span>
                    </div>
                </a>
            </div>
            <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden">
                <a href="/project-5">
                    <img class="w-full h-60 object-cover" src="https://spacema-dev.com/elevate/assets/images/portfolio-5.png" alt="Project 1">
                    <div
                        class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-indigo-500 to-pink-500 opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                    </div>
                    <div class="p-4 flex flex-col items-center justify-between relative z-10">
                        <h3 class="text-lg font-medium text-txt group-hover:text-gray-dark">Awesome Project 5</h3>
                        <span class="text-sm font-bold text-pink-500 group-hover:text-indigo-500">Web Design,
                            Branding</span>
                    </div>
                </a>
            </div>
            <div class="group portfolio-item relative hover:shadow-lg shadow-md rounded-lg overflow-hidden">
                <a href="/project-6">
                    <img class="w-full h-60 object-cover" src="https://spacema-dev.com/elevate/assets/images/portfolio-6.png" alt="Project 1">
                    <div
                        class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-indigo-500 to-pink-500 opacity-0 transition duration-300 ease-in-out group-hover:opacity-70">
                    </div>
                    <div class="p-4 flex flex-col items-center justify-between relative z-10">
                        <h3 class="text-lg font-medium text-txt group-hover:text-gray-dark">Awesome Project 6</h3>
                        <span class="text-sm font-bold text-pink-500 group-hover:text-indigo-500">Web Design,
                            Branding</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

Related Examples

Simple product card

Author:
farid

5 months ago

819
Simple Card with Image
Horizontal card

Author:
Prem..

2 years ago

8.4k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

2 months ago

56
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

5 months ago

1.3k
Card with Thumbnail
Post card with image

Author:
Mr Robot

2 years ago

10.4k
Layout switcher with tailwindcss and alpinejs

Author:
Michael Andreuzza

11 months ago

656
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Author:
Matti

2 months ago

504
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

1.9k
Card
Card Layout in Tailwind as React Compoment

Author:
Deepak Sharma

3 months ago

252
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

2.8k
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

10 months ago

1.4k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 weeks ago

59

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components