Projects List

This tailwind example is contributed by $@(\/)(\/)¥, on 06-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is CV template

List Resume template

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 2.5k 1

Fork Fullscreen

<div class="w-full h-full overflow-hidden bg-white dark:bg-black">
  <div class="sm:px-20 px-6 flex flex-col gap-4 justify-center items-center">
    
    <div class="w-fit sm:my-20 my-10">
      <h2 class="sm:text-5xl font-bold dark:text-white pb-2">Recent Projects</h2>
      <div class="rounded-t-full border-[1px] border-gray-500 dark:border-gray-400 overflow-hidden">
        <hr class="border-[3px] border-green-400 border-green-600 w-[40%]" />
      </div>
    </div>

<div
      class="w-full px-2 dark:text-white group hover:bg-green-400/20 rounded flex justify-between items-center cursor-pointer pb-4 border-b border-gray-300 dark:border-gray-500">
      <p class="sm:text-5xl text-xl font-bold">01.</p>
      <h2 class="sm:text-4xl text-xl">Project Title</h2>
      <img class="sm:w-[8rem] md:block hidden group-hover:animate-pulse" src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHx3ZWJzaXRlfGVufDB8MHx8fDE3MzYxNDgzNTJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Project-1">
      
      <div class="flex items-center gap-1">
        <ion-icon class="text-xl text-green-600 dark:text-green-400 sm:block hidden" name="arrow-up-outline"></ion-icon>
        <a href="#" class="font-semibold sm:text-xl sm:block hidden">View More</a>
        <ion-icon class="text-3xl text-gray-400 group-hover:text-green-400 sm:hidden block" name="eye-outline"></ion-icon>
      </div>
    </div>
    
    <div
      class="w-full px-2 dark:text-white group hover:bg-green-400/20 rounded flex justify-between items-center cursor-pointer pb-4 border-b border-gray-300 dark:border-gray-500">
      <p class="sm:text-5xl text-xl font-bold">02.</p>
      <h2 class="sm:text-4xl text-xl">Project Title</h2>
      <img class="sm:w-[8rem] md:block hidden group-hover:animate-pulse" src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxwcm9qZWN0fGVufDB8MHx8fDE3MzYxNDgzNjd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Project-2">
      
      <div class=" flex items-center gap-1">
        <ion-icon class="text-xl text-green-600 dark:text-green-400 sm:block hidden" name="arrow-up-outline"></ion-icon>
        <a href="#" class="font-semibold sm:text-xl sm:block hidden">View More</a>
        <ion-icon class="text-3xl text-gray-400 group-hover:text-green-400 sm:hidden block" name="eye-outline"></ion-icon>
      </div>
    </div>
    
    <div
      class="w-full px-2 dark:text-white group hover:bg-green-400/20 rounded flex justify-between items-center pb-4 border-b border-gray-300 dark:border-gray-500 cursor-pointer">
      <p class="sm:text-5xl text-xl font-bold">03.</p>
      <h2 class="sm:text-4xl text-xl">Project Title</h2>
      <img class="sm:w-[8rem] md:block hidden group-hover:animate-pulse" src="https://images.unsplash.com/photo-1505330622279-bf7d7fc918f4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHx3ZWJzaXRlfGVufDB8MHx8fDE3MzYxNDgzNTJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Project-3">
      
      <div class=" flex items-center gap-1">
        <ion-icon class="text-xl text-green-600 dark:text-green-400 sm:block hidden" name="arrow-up-outline"></ion-icon>
        <a href="#" class="font-semibold sm:text-xl sm:block hidden">View More</a>
        <ion-icon class="text-3xl text-gray-400 group-hover:text-green-400 sm:hidden block" name="eye-outline"></ion-icon>
      </div>
    </div>
    
    <div
      class="w-full px-2 dark:text-white group hover:bg-green-400/20 rounded flex justify-between items-center pb-4 border-b border-gray-300 dark:border-gray-500 cursor-pointer">
      <p class="sm:text-5xl text-xl font-bold">04.</p>
      <h2 class="sm:text-4xl text-xl">Project Title</h2>
      <img class="sm:w-[8rem] md:block hidden group-hover:animate-pulse" src="https://images.unsplash.com/photo-1505330622279-bf7d7fc918f4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHx3ZWJzaXRlfGVufDB8MHx8fDE3MzYxNDgzNTJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Project-3">
      
      <div class=" flex items-center gap-1">
        <ion-icon class="text-xl text-green-600 dark:text-green-400 sm:block hidden" name="arrow-up-outline"></ion-icon>
        <a href="#" class="font-semibold sm:text-xl sm:block hidden">View More</a>
        <ion-icon class="text-3xl text-gray-400 group-hover:text-green-400 sm:hidden block" name="eye-outline"></ion-icon>
      </div>
    </div>
  </div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Related Examples

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

629
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

481
Organization Hierarchy list

Anonymous

3 years ago

9.8k
Bullet points list
for sections like "Why Choose Us"

Orson Kincaid

2 years ago

2.5k
Event timeline list

Laurits

3 years ago

14k
List example

Wagner Augusto

2 years ago

2.5k
Responsive list
Horizontal list of items

Sophia Baker

3 years ago

10.9k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Hezron Okoko

2 years ago

3.7k
Item List with title
created by using fieldset and legend tags

Prashant

4 years ago

12.1k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.8k
Article List Section
A section displaying a list of articles with associated information.

Junclarkaizen Pagu

3 years ago

8k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k