Build Stunning Lists Component Easily in React with Tailwind CSS

Creating beautiful and functional list components is a breeze with React and Tailwind CSS. Whether you’re showcasing courses, tasks, or any other data, this component simplifies the process while maintaining a clean design.

In this guide, we’ll walk you through how to implement a reusable React Tailwind CSS list component, complete with TypeScript types and easy customization options. Let's dive in!

What is a List Component UI?

The list component is a versatile UI element often used to display related data, like courses, features, or steps. With Tailwind CSS, you can enhance its appearance while keeping the code minimal and reusable.

Tailwind CSS List Component UI

Here's an example of what the UI looks like:

Tailwind CSS List Style Component UI

React Tailwind CSS List Component Code

You can easily customize Tailwind styled list component. Just customize the title and items (list items) to fit any context. Here’s the complete implementation of the List component in React using TypeScript.

lists.tsx


1import { FC } from 'react'
2
3interface ListsProps {
4  title?: string
5  items: string[]
6}
7
8const Lists: FC<ListsProps> = ({ title = 'Courses Offered', items }) => {
9  return (
10    <div>
11      <h2 className="mb-6 text-xl font-semibold text-slate-900">{title}</h2>
12      <ul className="space-y-5">
13        {items.map((item, index) => (
14          <li
15            key={index}
16            className="relative ml-9 font-normal text-gray-700 before:absolute before:-ml-7 before:-mt-[6px] before:rotate-45 before:-scale-x-100 before:text-2xl before:font-semibold before:text-[#00AAFF] before:content-['L'] md:font-medium"
17          >
18            {item}
19          </li>
20        ))}
21      </ul>
22    </div>
23  )
24}
25
26export default Lists

How to Use the List Component in Your App

To integrate this list component into your application, follow the steps below:

Import the Component: Add the Lists component to your desired file.
Provide Props: Pass a title and an array of items to customize it for your use case.

Here’s an example of how to use it:

app.tsx


1import Lists from './components/lists/lists'
2
3const courses = [
4  'E-Commerce',
5  'UI UX Design',
6  'Web Development',
7  'Creative Design',
8  'Mobile App Development',
9  'Social Media Marketing',
10  'Content Marketing & Advertising',
11]
12
13const App = () => {
14  return (
15    <div className="min-h-screen bg-gray-100 pt-20">
16      <div className="mx-auto max-w-xl rounded-lg border border-blue-100 bg-white p-10">
17        <Lists title="Courses Offered by Taleemify" items={courses} />
18      </div>
19    </div>
20  )
21}
22
23export default App