JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <h2>黑色背景的Search Box</h2>
        <form action="" id="searchBlack" method="get" class="search bgBlack">
            <input type="text" name="search" size="40" placeholder="Search..." />
        </form>
        <h2>高亮背景的Search Box</h2>
        <form action="" id="searchLight" method="get" class="search bgLight">
            <input type="text" name="search" size="40" placeholder="Search..." />
        </form>
        <h2>Apple.com的Search Box</h2>
        <form action="" id="searchApple" method="get" class="search appleSearch">
            <input type="text" name="search" size="40" placeholder="Search..." />
        </form>
    </div>

CSS

.demo {
            padding: 20px;
            background: #666;
        }
        .search {
            position: relative;
        }
        
        .search:before {
            content: "";
            border: 1px solid #777;
            border-width: 1px 1px 2px;
            width: 5px;
            height: 0;
            display: inline-block;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            position: absolute;
            left:16px;
            top:15px;
            z-index:3;
        }
        .search:after {
            content: "";
            width: 5px;
            height: 5px;
            border: 2px solid #777;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            z-index: 2;
            left: 10px;
            top: 7px;
            display: inline-block;
        }
        
        .search input[type="text"] {
            font: bold 12px Arial,Helvetica,Sans-serif;
            width: 150px;
            padding: 6px 15px 6px 35px;
            border: 0 none;
            color: #777;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
            -webkit-transition: all 0.7s ease 0s;
            -moz-transition: all 0.7s ease 0s;
            -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
        }
        .search input[type="text"]:focus {
            width: 200px;
        }
        /*===========黑色背景色的Search Box============*/
        .bgBlack input[type="text"] {
            background-color: #444;
            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
            -moz-box-shadow: 0 1px 0 rgba(255,...