JSFiddle - React, Tailwind, and code Playground

by AlexandrAbakumov

HTML

<input type="text" value="Button"><br/>
<input type="password" value="Button"><br/>
<input type="submit" value="Button"><br/>
<input type="radio" value="Button"><br/>
<input type="checkbox" value="Button"><br/>
<input type="button" value="Button"><br/>
<input type="color" value="Button"><br/>
<input type="date" value="Button"><br/>
<input type="datetime" value="Button"><br/>
    
<input type="datetime-local" value="Button"><br/>
Email: <input type="email" value="Button"><br/>
<input type="month" value="Button"><br/>
<input type="number" value="Button"><br/>
<input type="range" value="Button"><br/>
<input type="search" value="Button"><br/>
<input type="tel" value="Button"><br/>
<input type="time" value="Button"><br/>
<input type="url" value="Button"><br/>
<input type="week" value="Button"><br/>

CSS

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"],
input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"],
input[type="time"], input[type="url"], input[type="week"], textarea, select {
    border: 1px solid #aaa;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus,
input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus,
input[type="week"]:focus, textarea:focus, select:focus {
/*input:focus, textarea:focus {*/
     /*background-image: none;*/
     background-color: #ffffff;
     border: solid 1px #33677F;
}