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
Non-linear Components In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
Spring Boot Tutorial Spring Boot is a Java framework that makes it easier to create and run Java applications. It simplifies the configuration and setup process, allowing developers to focus more on writing code for their applications. This Spring Boot Tutorial is a comprehensive guide that covers both basic and advance
10 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
Class Diagram | Unified Modeling Language (UML) A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a project—like developers and designers—understand how the system is organized and how its components interact
12 min read
JavaScript Interview Questions and Answers JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as
15+ min read
React Tutorial React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon
8 min read
Steady State Response In this article, we are going to discuss the steady-state response. We will see what is steady state response in Time domain analysis. We will then discuss some of the standard test signals used in finding the response of a response. We also discuss the first-order response for different signals. We
9 min read
Backpropagation in Neural Network Back Propagation is also known as "Backward Propagation of Errors" is a method used to train neural network . Its goal is to reduce the difference between the model’s predicted output and the actual output by adjusting the weights and biases in the network.It works iteratively to adjust weights and
9 min read