Create Description List Component Using React and Tailwind CSS
Last Updated :
03 Oct, 2024
A description list is an elementary method to show key-value pairs, where a term and its definition are presented side by side. In this article, we will see the way of styling and implementing it as a component in a React Project using Tailwind CSS.
Prerequisites
Approach to Create Description List Component
- Integrate Tailwind CSS into the project.
- Build the description list component that dynamically accepts data as props.
- Style the component using Tailwind CSS to ensure it is responsive.
- Display the terms and their definitions in a clean, modern UI format.
Steps to Create Description List Component
Step 1: Set up the project using the command.
npm create vite@latest my-project
cd my-project
npm install
Step 2: Install Tailwind CSS using the command.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 3: Configure the tailwind paths in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Step 4: Add tailwind directives to your .src/ index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Folder Structure
Folder StructureUpdated Dependencies
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},Example: In this example, we will create the description list component using react and tailwind CSS, remove all code in .src/App.css
JavaScript
// App.jsx
import React from 'react';
const App = () => {
return (
<div className='w-1/2 bg-black'>
<div className="px-4 sm:px-0">
<h3 className="text-base font-semibold leading-7 text-white
dark:text-gray-100">Applicant Information</h3>
<p className="mt-1 max-w-2xl text-sm leading-6 text-gray-400
dark:text-gray-400">Personal details and application.</p>
</div>
<div className="mt-6 border-t border-gray-700 dark:border-gray-700">
<dl className="divide-y divide-gray-700 dark:divide-gray-700">
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-white
dark:text-gray-100">Full name</dt>
<dd className="mt-1 text-sm leading-6 text-gray-400
dark:text-gray-300 sm:col-span-2 sm:mt-0">Divyanshu Raj</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-white
dark:text-gray-100">Application for</dt>
<dd className="mt-1 text-sm leading-6 text-gray-400
dark:text-gray-300 sm:col-span-2 sm:mt-0">MERN Stack Developer
</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-white
dark:text-gray-100">Email address</dt>
<dd className="mt-1 text-sm leading-6 text-gray-400
dark:text-gray-300 sm:col-span-2 sm:mt-0">example@gmail.com</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-white
dark:text-gray-100">Salary expectation</dt>
<dd className="mt-1 text-sm leading-6 text-gray-400
dark:text-gray-300 sm:col-span-2 sm:mt-0">$80,000</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-white
dark:text-gray-100">About</dt>
<dd className="mt-1 text-sm leading-6 text-gray-400
dark:text-gray-300 sm:col-span-2 sm:mt-0">
Hey, I am a final year student searching for a
Software Developer role!</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-white
dark:text-gray-100">Attachments</dt>
<dd className="mt-2 text-sm text-gray-900 dark:text-gray-300
sm:col-span-2 sm:mt-0">
<ul role="list" className="divide-y divide-gray-700
dark:divide-gray-700 rounded-md border border-gray-700
dark:border-gray-700">
<li className="flex items-center justify-between
py-4 pl-4 pr-5 text-sm leading-6">
<div className="flex w-0 flex-1 items-center">
<svg className="h-5 w-5 flex-shrink-0
text-gray-400 dark:text-gray-300"
viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fillRule="evenodd"
d="M15.621 4.379a3 3 0 00-4.242 0l-7
7a3 3 0 004.241 4.243h.001l.497-.5a.75.75
0 011.064 1.057l-.498.501-.002.002a4.5 4.5
0 01-6.364-6.364l7-7a4.5 4.5 0 016.368
6.36l-3.455 3.553A2.625 2.625 0 119.52
9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45
3.451a1.125 1.125 0 001.587
1.595l3.454-3.553a3 3 0 000-4.242z"
clipRule="evenodd" />
</svg>
<div className="ml-4 flex min-w-0 flex-1 gap-2">
<span className="truncate font-medium
text-white">resume_MERN Stack_developer.
pdf
</span>
<span className="flex-shrink-0
text-gray-400
dark:text-gray-300">2.4mb</span>
</div>
</div>
<div className="ml-4 flex-shrink-0">
<a href="#" className="font-medium
text-indigo-600 hover:text-indigo-500
dark:text-indigo-400">Download</a>
</div>
</li>
<li className="flex items-center justify-between
py-4 pl-4 pr-5 text-sm leading-6">
<div className="flex w-0 flex-1 items-center">
<svg className="h-5 w-5 flex-shrink-0
text-gray-400 dark:text-gray-300"
viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fillRule="evenodd" d="M15.621
4.379a3 3 0 00-4.242 0l-7 7a3 3 0
004.241 4.243h.001l.497-.5a.75.75
0 011.064 1.057l-.498.501-.002.002a4.5
4.5 0 01-6.364-6.364l7-7a4.5 4.5 0
016.368 6.36l-3.455 3.553A2.625 2.625
0 119.52 9.52l3.45-3.451a.75.75 0
111.061 1.06l-3.45 3.451a1.125 1.125
0 001.587 1.595l3.454-3.553a3 3 0
000-4.242z" clipRule="evenodd" />
</svg>
<div className="ml-4 flex min-w-0 flex-1
gap-2">
<span className="truncate font-medium
text-white">coverletter_MERN Stack_developer
.pdf</span>
<span className="flex-shrink-0 text-gray-400
dark:text-gray-300">4.5mb</span>
</div>
</div>
<div className="ml-4 flex-shrink-0">
<a href="#" className="font-medium
text-indigo-600 hover:text-indigo-500
dark:text-indigo-400">Download</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
);
};
export default App;
To start the Application run the following command.
npm run dev
Output:
Description List Component Using React and Tailwind CSS
Similar Reads
Create Drawer Component using React and Tailwind CSS
A drawer component is a sliding panel that comes from the side of the screen, often used for navigation menus or displaying additional content. In this article, we will learn how to create a responsive drawer component in React using Tailwind CSS for styling. PrerequisitesJavaScriptReactTailwind CSS
3 min read
Create Progress Bar Component using React and Tailwind CSS
A progress bar is a visual representation of progress in a process. It is commonly used in web applications to indicate the completion status of an operation. In this article, we will learn how to create a progress bar component in React using Tailwind CSS for styling. PrerequisitesJavaScriptReactTa
2 min read
Create Content Sections using React and Tailwind CSS
Creating well-structured content sections is crucial for any modern web application. In this article, we will walk through how to build content sections using React styled with Tailwind CSS and enhanced with React Icons. We will create a React application with multiple content sections. Each section
3 min read
Create Dropdowns UI using React and Tailwind CSS
Dropdown UI components are often used in web applications for forms, navigation, or user preferences, allow users to select from a list of options by clicking a button, which will display a drop-down menu, in this article we will create a dropdown element using React for functionality and Tailwind C
3 min read
Create Command Palettes UI using React and Tailwind CSS
This article shows you how to create a Command Palette UI using React and Tailwind CSS. A command palette lets users easily search for and run commands within an app, making navigation faster and more efficient. We’ll walk you through building a simple and intuitive interface where users can type, s
4 min read
Create Header using React and Tailwind CSS
In modern web development building responsive and customizable user interfaces is crucial. One of the essential elements of any web application is the header which typically contains navigation links branding or other important controls. we will create a responsive header section using React and Tai
4 min read
Create Pagination UI Using React And Tailwind CSS
When working with huge data sets in online applications, pagination is an essential feature. It makes a lengthy list of items easier to browse through by dividing them into digestible parts. This article will tell you how to use Tailwind CSS for styling and React for front-end functionality to creat
3 min read
Create Category Filters using React and Tailwind CSS
Creating a category filter in a React application allows users to filter a list of items based on selected categories. We will build a simple filtering system using React for state management and Tailwind CSS for styling and React Icons to add visual enhancements to the UI. This project will allow u
4 min read
Create Incentives using React and Tailwind CSS
Creating an Incentives section in a web application can be a great way to highlight special offers and rewards or bonuses that motivate users to engage with your product or service. This feature can be used in various scenarios such as e-commerce websites educational platforms or company portals. In
4 min read
Create Footers Using React And Tailwind CSS
We will learn how to create a responsive footer using React and Tailwind CSS with a modern design. The footer will feature a green background with white text providing a clean and professional look. We will create three sections: Contacts social media and Services to display important information an
3 min read