Radio Button List

Learn how to create a Responsive Navigation with Radio Button List using Tailwind CSS

Preview
Code

<body class="flex items-center justify-center min-h-screen bg-gray-100">
    <div
        class="relative flex w-full max-w-[24rem] flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
        <nav class="flex min-w-[240px] flex-row gap-1 p-2 font-sans text-base font-normal text-blue-gray-700">
            <div role="button"
                class="flex items-center w-full p-0 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
                <label htmlFor="horizontal-list-react" class="flex items-center w-full px-3 py-2 cursor-pointer">
                    <div class="grid mr-3 place-items-center">
                        <div class="inline-flex items-center">
                            <label class="relative flex items-center p-0 rounded-full cursor-pointer"
                                htmlFor="horizontal-list-react">
                                <input name="horizontal-list" id="horizontal-list-react" type="radio"
                                    class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border border-blue-gray-200 text-gray-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:before:bg-gray-900 hover:before:opacity-0" />
                                <span
                                    class="absolute text-gray-900 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 16 16"
                                        fill="currentColor">
                                        <circle data-name="ellipse" cx="8" cy="8" r="8"></circle>
                                    </svg>
                                </span>
                            </label>
                        </div>
                    </div>
                    <p class="block font-sans text-base antialiased font-medium leading-relaxed text-blue-gray-400">
                        React.js
                    </p>
                </label>
            </div>
            <div role="button"
                class="flex items-center w-full p-0 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
                <label htmlFor="horizontal-list-vue" class="flex items-center w-full px-3 py-2 cursor-pointer">
                    <div class="grid mr-3 place-items-center">
                        <div class="inline-flex items-center">
                            <label class="relative flex items-center p-0 rounded-full cursor-pointer"
                                htmlFor="horizontal-list-vue">
                                <input name="horizontal-list" id="horizontal-list-vue" type="radio"
                                    class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border border-blue-gray-200 text-gray-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:before:bg-gray-900 hover:before:opacity-0" />
                                <span
                                    class="absolute text-gray-900 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 16 16"
                                        fill="currentColor">
                                        <circle data-name="ellipse" cx="8" cy="8" r="8"></circle>
                                    </svg>
                                </span>
                            </label>
                        </div>
                    </div>
                    <p class="block font-sans text-base antialiased font-medium leading-relaxed text-blue-gray-400">
                        Vue.js
                    </p>
                </label>
            </div>
            <div role="button"
                class="flex items-center w-full p-0 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
                <label htmlFor="horizontal-list-svelte" class="flex items-center w-full px-3 py-2 cursor-pointer">
                    <div class="grid mr-3 place-items-center">
                        <div class="inline-flex items-center">
                            <label class="relative flex items-center p-0 rounded-full cursor-pointer"
                                htmlFor="horizontal-list-svelte">
                                <input name="horizontal-list" id="horizontal-list-svelte" type="radio"
                                    class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-full border border-blue-gray-200 text-gray-900 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:before:bg-gray-900 hover:before:opacity-0" />
                                <span
                                    class="absolute text-gray-900 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 16 16"
                                        fill="currentColor">
                                        <circle data-name="ellipse" cx="8" cy="8" r="8"></circle>
                                    </svg>
                                </span>
                            </label>
                        </div>
                    </div>
                    <p class="block font-sans text-base antialiased font-medium leading-relaxed text-blue-gray-400">
                        Svelte.js
                    </p>
                </label>
            </div>
        </nav>
    </div>

```
No Custom CSS
```
```
No need of JavaScript
```

Introduction

In modern web design, providing users with a clean and functional navigation system is crucial. This tutorial will guide you through creating a responsive navigation component using Tailwind CSS, featuring a radio button list that allows users to select options like React.js, Vue.js, or Svelte.js. With this approach, you can easily customize the look and feel of your navigation, ensuring it aligns with your website's overall design.

Key Features

Responsive Design: The component adjusts seamlessly to different screen sizes, providing a consistent experience across devices.
Custom Radio Buttons: Tailwind CSS is used to style the radio buttons with hover and focus effects, enhancing user interaction.
Simple Integration: Easily integrate this component into any project with minimal setup and customization.
Clean and Modern UI: The design is clean, modern, and fits well with various web themes.

Steps to Copy the Code

Include Tailwind CSS: Add the Tailwind CSS CDN to your HTML file in the <head> section.

<script src="https://cdn.tailwindcss.com"></script>

Copy the HTML Structure: Use the provided HTML structure for the navigation component.
Customize the Styling: Modify the Tailwind CSS classes to match your project's design requirements.
Add the JavaScript: If needed, include any additional JavaScript to enhance the functionality.

Code Explanation

HTML Structure: The navigation component is wrapped in a <nav> tag, containing multiple <div> elements that serve as radio button options. Each radio button is associated with a label representing different frameworks like React.js, Vue.js, and Svelte.js.
Tailwind CSS Classes: Classes like flex, items-center, rounded-full, and hover:bg-blue-gray-50 are used to ensure the component is responsive, well-aligned, and interactive. The peer class is crucial for linking the radio button input with its associated visual elements, such as the SVG checkmark.
Custom Radio Buttons: The radio buttons are styled to be circular with an inner checkmark that appears when selected. The peer-checked class allows the SVG to be displayed only when the corresponding radio button is checked.

Conclusion

This guide demonstrates how to create a responsive and visually appealing navigation component using Tailwind CSS. The radio button list offers a unique and interactive way for users to navigate between options, enhancing the overall user experience. With simple customization, this component can be adapted to fit any web project, making it a versatile addition to your design toolkit.