Home
$@(\/)(\/)¥
Projects List

Projects List

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

List Resume template

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

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

1.6k

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

Users ranking list with points

Author:
Leif99

2 years ago

11.8k
Hierarchy list

Author:
Anonymous

2 years ago

10.6k
Modern Resume Template - Tailwind CSS
A professional, responsive single-page resume template featuring hero section, experience timeline, skills with animated progress bars, project portfolio, and contact form. Includes dark/light mode toggle, print-friendly styling, smooth animations, and mobile-first design. Perfect for developers, designers, and professionals seeking a standout resume that's easily customizable and deployment-ready.

Author:
Ijila Itunu

3 months ago

248
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

11 months ago

2.1k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

11 months ago

1.5k
Hero

Author:
Aman kumar

1 year ago

6.9k
Hero

Author:
Hasan AlDoy (McDoy)

11 months ago

1.5k
Feature list
list section

Author:
Gopi Yadav

2 years ago

10.6k
Portfolio About & Skills

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

1 year ago

2.2k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

11 months ago

794
Timeline
timeline with journey

Author:
Abhiraj

1 year ago

1.1k
List component

Author:
Shru hari

1 year ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components