## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) # Color Picker Category: forms Description: Color Input ## Small Variant ### SenangStart CSS Code ```html <div layout="flex items:center" space="g:small"> <input type="color" layout="block" space="p:tiny h:large w:big-2x" visual="bg:white border-w:thin border:gray-200 cursor:pointer rounded:medium disabled:opacity:50" class="disabled:pointer-events-none" id="color-s" value="#2563eb" title="Choose your color"> <label for="color-s" visual="text-size:small text:gray-700">Color S</label> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center gap-2"> <input type="color" class="p-1 h-8 w-14 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="color-s" value="#2563eb" title="Choose your color"> <label for="color-s" class="text-sm text-gray-700">Color S</label> </div> ``` ## Medium Variant ### SenangStart CSS Code ```html <div layout="flex items:center" space="g:small"> <input type="color" layout="block" space="p:tiny h:large-3x w:big-4x" visual="bg:white border-w:thin border:gray-200 cursor:pointer rounded:medium disabled:opacity:50" class="disabled:pointer-events-none" id="color-m" value="#2563eb" title="Choose your color"> <label for="color-m" visual="text-size:base text:gray-700">Color M</label> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center gap-2"> <input type="color" class="p-1 h-10 w-20 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="color-m" value="#2563eb" title="Choose your color"> <label for="color-m" class="text-base text-gray-700">Color M</label> </div> ``` ## Large Variant ### SenangStart CSS Code ```html <div layout="flex items:center" space="g:small"> <input type="color" layout="block" space="p:tiny-2x h:big-2x w:giant" visual="bg:white border-w:thin border:gray-200 cursor:pointer rounded:medium disabled:opacity:50" class="disabled:pointer-events-none" id="color-l" value="#2563eb" title="Choose your color"> <label for="color-l" visual="text-size:large text:gray-700">Color L</label> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center gap-2"> <input type="color" class="p-1.5 h-14 w-24 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="color-l" value="#2563eb" title="Choose your color"> <label for="color-l" class="text-lg text-gray-700">Color L</label> </div> ```