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

633
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)

6 months ago

489
Todo list in tailwlind

Kofi Osei

3 years ago

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

Prashant

4 years ago

12.1k
Resume template for tech field
IT industry resume layout

Nishant Trivedi

3 years ago

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

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

2 years ago

6.3k
Users ranking list with points

Leif99

3 years ago

12.9k
Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.9k
Logo cloud

Alok

3 years ago

11.1k
Feature List

Laurits

4 years ago

11.3k
Modern resume template
modern resume template with data

Nataraj Nataraj

1 year ago

618
Portfolio Hero Section 4

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

1 year ago

5k