Home
Samuel Abera
Projects List

Projects List

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

400

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

Event timeline list

Author:
Laurits

2 years ago

12.5k
Minimal list section

Author:
Task Master

2 years ago

7.8k
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

2 months ago

902
Resume template for tech field
IT industry resume layout

Author:
Nishant Trivedi

1 year ago

8.8k
List example

Author:
Isabella Kowalski

2 years ago

13.1k
Nested list section
List with soft background colors. List with Hierarchy

Author:
Orion.c

2 years ago

11.2k
Feature list
list section

Author:
Gopi Yadav

2 years ago

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

Author:
Prashant

2 years ago

10.6k
Basic list

Author:
Leon Bachmann

2 years ago

9.6k
Features list

Author:
Leon Bachmann

2 years ago

10.3k
Items list
list in fieldset

Author:
Prajwal Hallale

2 years ago

9.2k
Nested list

Author:
Lukas Müller

2 years ago

12.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components