Components
Tailwind CSS Circle Color Picker - Madhuranjan UI
Discover an interactive, visually appealing color picker component built with Tailwind CSS and React. This component offers an intuitive circular interface for seamless color selection.
The Circle Color Picker component allows users to easily select their favorite color through a dynamic circular layout. It is designed to be fully responsive and theme-aware, making it a perfect addition to modern web applications. Whether you're building a design tool or a customizable interface, this component delivers an engaging user experience with smooth interactions and clear visual feedback.
PRO
HEX
RECENT COLORS
1<div class="mx-auto flex w-full max-w-md flex-col gap-5 m-4 border border-gray-200/70 bg-gradient-to-br from-white/90 to-gray-50 p-6 shadow-xl shadow-violet-100/50 backdrop-blur-sm dark:border-blue-900/50 dark:from-blue-950/90 dark:to-blue-900 dark:shadow-blue-950/50">
2 <!-- Header -->
3 <div class="flex items-center justify-between">
4 <label class="flex items-center gap-2 text-lg font-semibold text-gray-800 dark:text-gray-100">
5 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-violet-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
6 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
7 </svg>
8 Color Picker
9 </label>
10 <span class="rounded-full bg-violet-100/70 px-2 py-1 text-xs font-medium text-violet-700 dark:bg-blue-900/50 dark:text-blue-300">PRO</span>