Create Radio Groups UI using React and Tailwind CSS
Last Updated :
24 Sep, 2024
React is a popular JavaScript library for building user interfaces combined with Tailwind CSS a utility-first CSS framework that offers a powerful approach to developing stylish and responsive components. This article shows how to build various radio group UIs using React and Tailwind CSS. It includes several designs such as simple lists inline lists lists with descriptions and color pickers each styled to meet specific design needs.
Prerequisites
Steps to Create Radio Groups UI
Step 1: Set up a React Application
npx create-react-app react-app
Step 2: Install node modules using the command.
npm install
Step 3: Navigate to the Project
cd react-app
Step 4: Install Tailwind CSS using the command.
npm install -D tailwindcss
npx tailwindcss init
Step 5: Configure the tailwind paths in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Step 6: Add tailwind directives to your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
overflow: hidden;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Project Structure:
project structureUpdated Dependencies:
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}Step 7: Install React Icons
npm install react-icons
Example: In this example we will create the footers using react and tailwind CSS
JavaScript
// src/App.js
import React, { useState } from 'react';
import { FaCheck, FaPaintBrush, FaSquare, FaList,
FaTable, FaInfoCircle } from 'react-icons/fa';
import { HiOutlineMenu } from 'react-icons/hi';
import { BsFillCircleFill } from 'react-icons/bs';
import './index.css'; // Ensure Tailwind CSS is imported here
const App = () => {
const [selected, setSelected] = useState('');
const handleChange = (e) => {
setSelected(e.target.value);
};
return (
<div className="bg-white text-green-700 min-h-screen p-6">
<h1 className="text-4xl font-bold mb-8 text-center">
Radio Groups UI with React & Tailwind CSS</h1>
<section className="space-y-6">
<h2 className="text-3xl font-semibold mb-4 flex items-center">
<FaList className="mr-3" /> Simple List</h2>
<div className="space-y-4">
<label className="flex items-center space-x-3">
<input
type="radio"
name="simple-list"
value="Option 1"
checked={selected === 'Option 1'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500
rounded bg-white">Option 1</span>
</label>
<label className="flex items-center space-x-3">
<input
type="radio"
name="simple-list"
value="Option 2"
checked={selected === 'Option 2'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500
rounded bg-white">Option 2</span>
</label>
</div>
</section>
<section className="space-y-6">
<h2 className="text-3xl font-semibold mb-4 flex items-center">
<HiOutlineMenu className="mr-3" /> Simple Inline List</h2>
<div className="flex space-x-6">
<label className="flex items-center space-x-3">
<input
type="radio"
name="inline-list"
value="Option A"
checked={selected === 'Option A'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500 rounded bg-white">
Option A</span>
</label>
<label className="flex items-center space-x-3">
<input
type="radio"
name="inline-list"
value="Option B"
checked={selected === 'Option B'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500
rounded bg-white">Option B</span>
</label>
</div>
</section>
<section className="space-y-6">
<h2 className="text-3xl font-semibold mb-4 flex items-center">
<FaInfoCircle className="mr-3" /> List with Description</h2>
<div className="space-y-4">
<label className="flex flex-col space-y-2">
<span className="text-gray-600">Description for Option 1</span>
<div className="flex items-center space-x-3">
<input
type="radio"
name="desc-list"
value="Option 1"
checked={selected === 'Option 1'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500
rounded bg-white">Option 1</span>
</div>
</label>
<label className="flex flex-col space-y-2">
<span className="text-gray-600">Description for Option 2</span>
<div className="flex items-center space-x-3">
<input
type="radio"
name="desc-list"
value="Option 2"
checked={selected === 'Option 2'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500
rounded bg-white">Option 2</span>
</div>
</label>
</div>
</section>
<section className="space-y-6">
<h2 className="text-3xl font-semibold mb-4 flex items-center">
<FaSquare className="mr-3" /> List with Inline Description</h2>
<div className="space-y-4">
<label className="flex items-center space-x-3">
<span className="text-gray-600">Description for Option A</span>
<input
type="radio"
name="inline-desc-list"
value="Option A"
checked={selected === 'Option A'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500 rounded
bg-white">Option A</span>
</label>
<label className="flex items-center space-x-3">
<span className="text-gray-600">Description for Option B</span>
<input
type="radio"
name="inline-desc-list"
value="Option B"
checked={selected === 'Option B'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 border border-green-500
rounded bg-white">Option B</span>
</label>
</div>
</section>
<section className="space-y-6">
<h2 className="text-3xl font-semibold mb-4 flex items-center">
<FaCheck className="mr-3" /> List with Radio on Right</h2>
<div className="space-y-4">
<label className="flex items-center justify-end space-x-3">
<span className="p-3 border border-green-500
rounded bg-white">Option X</span>
<input
type="radio"
name="radio-right-list"
value="Option X"
checked={selected === 'Option X'}
onChange={handleChange}
className="form-radio text-green-500"
/>
</label>
<label className="flex items-center justify-end space-x-3">
<span className="p-3 border border-green-500
rounded bg-white">Option Y</span>
<input
type="radio"
name="radio-right-list"
value="Option Y"
checked={selected === 'Option Y'}
onChange={handleChange}
className="form-radio text-green-500"
/>
</label>
</div>
</section>
<section className="space-y-6">
<h2 className="text-3xl font-semibold mb-4 flex items-center">
<BsFillCircleFill className="mr-3" /> Color Picker</h2>
<div className="flex space-x-6">
<label className="flex items-center space-x-3">
<input
type="radio"
name="color-picker"
value="Red"
checked={selected === 'Red'}
onChange={handleChange}
className="form-radio text-red-500"
/>
<span className="p-3 bg-red-500 text-white rounded">Red</span>
</label>
<label className="flex items-center space-x-3">
<input
type="radio"
name="color-picker"
value="Green"
checked={selected === 'Green'}
onChange={handleChange}
className="form-radio text-green-500"
/>
<span className="p-3 bg-green-500 text-white
rounded">Green</span>
</label>
</div>
</section>
<section className="space-y-6">
<h2 className="text-3xl font-semibold mb-4 flex items-center">
<FaTable className="mr-3" /> Simple Table</h2>
<div className="overflow-x-auto bg-white border
border-gray-200 rounded-lg shadow-md">
<table className="min-w-full bg-white">
<thead>
<tr className="bg-green-500 text-white">
<th className="py-3 px-4 border-b">Item</th>
<th className="py-3 px-4 border-b">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-2 px-4 border-b">Item 1</td>
<td className="py-2 px-4 border-b">
Description for item 1</td>
</tr>
<tr>
<td className="py-2 px-4 border-b">Item 2</td>
<td className="py-2 px-4 border-b">
Description for item 2</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
);
};
export default App;
To start the Application run the following command:
npm start
Output:
outputConclusion
This setup demonstrates how to design and align various UI elements using React and Tailwind CSS. The design focuses on a clean organized layout with a white background and green text making the UI visually appealing and user friendly.
Similar Reads
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 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 Navbars UI using React and Tailwind CSS
A UI plays an important role because a clean, well-designed interface creates a positive first impression and if the UI is good then users can stay on our website some more time and if the UI is bad then they can not stay on our site for more time. we will see how to Create Navbars UI using React an
5 min read
Create Feeds UI using React and Tailwind CSS
In the world of social networking, feeds are the primary way users interact with content. Whether it is on LinkedIn, Facebook, or Twitter the feed showcases posts updates, and activities from people or organizations. This article will help you build a LinkedIn-style feed UI using React and Tailwind
4 min read
Create Modal Dialogs UI using React and Tailwind CSS
Modal dialogs are an essential part of modern web applications. They offer a user-friendly way to present information or collect input without navigating away from the current page. Modals typically appear as overlays which help focus the user's attention on specific tasks like forms or alerts and c
6 min read
Create Select Menus UI using React and Tailwind CSS
We will build a Select Menu UI using React and Tailwind CSS. Select menus are dropdowns that allow users to choose one option from a predefined list. We'll style the dropdown using Tailwind CSS for a modern, clean look and integrate React Icons to improve user experience. PrerequisitesReact.jsTailwi
5 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 FAQs using React and Tailwind CSS
A Frequently Asked Questions section is a common feature found on websites and applications that helps users find answers to common queries in an organized manner. A well-designed FAQ can improve user experience reduce support requests and provide users with quick and easy access to helpful informat
5 min read
Create Form Layouts using React and Tailwind CSS
We will create a responsive form layout using React and Tailwind CSS. We will design the form with input fields, buttons, and icons to create a modern UI. This form layout can be used in various applications such as login pages sign-up forms and contact forms. Forms are essential components of web a
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