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

273

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

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

3 weeks ago

426
Users ranking list with points

Author:
Leif99

1 year ago

10.5k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

3 weeks ago

213
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

11 months ago

2.4k
Logo cloud

Author:
Alok

1 year ago

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

Author:
Noob

2 years ago

19.2k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

1 year ago

19.2k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

1 week ago

17
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

6k
tailwind one page resume cv template
tailwind one page resume cv template

Author:
Geoffrey Callaghan

1 year ago

4k
List component

Author:
Shru hari

9 months ago

1.7k
Responsive list with icons

Author:
Prajwal Hallale

2 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components