JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<form id="samplecolor">
<fieldset class="col">
    <legend>Color element 1</legend>
    <label for="excolor1">Color: </label>
    <input type="color" id="excolor1" name="excolor1">
</fieldset>
<fieldset class="col">
    <legend>Color element 2</legend>
    <label for="excolor2">Color: </label>
    <input type="color" id="excolor2" name="excolor2" list="greyscale">
</fieldset>
<fieldset class="col">
    <legend>Color element 3</legend>
    <label for="excolor3">Color: </label>
    <input type="color" id="excolor3" name="excolor3" list="rainbow">
</fieldset>
<datalist id="greyscale">
    <option value="#000000">
    <option value="#333333">
    <option value="#666666">
    <option value="#999999">
    <option value="#cccccc">
</datalist>
<datalist id="rainbow">
    <option value="#FF0000">Red</option>
    <option value="#FFA500">Orange</option>
    <option value="#FFFF00">Yellow</option>
    <option value="#008000">Green</option>
    <option value="#0000FF">Blue</option>
    <option value="#4B0082">Indigo</option>
    <option value="#EE82EE">Violet</option>
</datalist>
</form>

CSS

body {
    font-family: sans-serif;
    font-size: 85%;
    text-align: top;
}
fieldset {
    width: 93.5%;
}
fieldset.col {
    display: inline-block;
    width: 45%;
    padding-bottom: 8em;
}
label, input {
    display: inline-block;
    width: 40%;
    height: 2em;
}