JSFiddle - React, Tailwind, and code Playground

by Ilmv

HTML

<input class="a" type="text" />
<select class="a" >
    <option>England</option>
    <option>Ireland</option>
    <option>Scotland</option>
    <option>Wales</option>
</select>
<input class="b" type="text" />
<input class="c" type="text" />
<input class="d" type="text" />
<input class="e" type="text" />
<input class="f" type="text" />
<input class="g" type="text" />
<input class="h" type="text" />
<input class="i" type="text" />

CSS

input, select {
    float: left;
    clear: both;
    margin: 50px;
    width: 250px;
}

input, select {
    background-color: white;
    border: 1px solid #BBB;  
    border-radius: 3px; 
    padding: 3px;
}

input:focus, select:focus {
    -moz-outline-radius: 5px;
    outline-radius: 5px;
    -webkit-outline-radius: 5px;
    outline: 2px solid #FF4B00; 
    outline-offset: 0;
    -moz-outline-offset: 0;
    
    
    
}


.a {
    
}

.b {
    outline: 50px solid orange;   
}

.c {
    outline: 50px groove green;   
}

.d {
    outline: 50px ridge yellow;   
}

.e {
    outline: 50px inset red;   
}

.f {
    outline: 50px outset pink;   
}

.g {
    outline: 50px solid orange;   
}

.h {
    outline: 50px solid orange;   
}

.i {
    outline: 50px solid orange;   
}