JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<div class="select"> 
            <select name="slct" id="slct"> 
                <option>Computer Science Subjects</option> 
                <option value="1">Operating System</option> 
                <option value="2">Computer Networks</option> 
                <option value="3">Data Structure</option> 
                <option value="4">Algorithm</option> 
                <option value="5">C programming</option> 
                <option value="6">JAVA</option> 
            </select> 
        </div>

CSS

h1 { 
                color:green; 
            } 
            select { 
                -webkit-appearance: none; 
                -moz-appearance: none; 
                -ms-appearance: none; 
                appearance: none; 
                outline: 0; 
                background: #fff; 
                background-image: none; 
                /* border:1px solid black;  */
                border:1px solid white; 
            } 
            .select { 
                position: relative; 
                display: block; 
                width: 20em; 
                height: 3em; 
                line-height: 3; 
                /* background: #2C3E50;  */
                overflow: hidden; 
                /* border-radius: .25em;  */
                border:1px solid white; 
            } 
            select { 
                width: 100%; 
                height: 100%; 
                margin: 0; 
                padding: 0 0 0 .5em; 
                color: #fff; 
                cursor: pointer; 
                color:#28d4e7;
                border:1px solid white; 
                font-size: 20px; /* fontsize of the select box*/
            } 
            select::-ms-expand { 
                display: none; 
            }  
            /* dropdown arrow*/
            .select::after { 
                content: '\2228'; 
                position: absolute; 
                top: 0; 
                right: 0; 
                bottom: 0; 
                padding: 0 1em; 
                background: white; 
                pointer-events: none; 
                width: 16px;
                height: 16px;
                color:#28d4e7;
            } 
            .select:hover::after { 
                color: #000000; 
            } 
              
            <!-- For diffrent browsers -->
            .select::after { 
                -webkit-transition: .25s all ease; 
                -o-transition: .25s all ease; 
                transition: .25s all ease; 
    ...