JSFiddle - React, Tailwind, and code Playground

by jeevankk

HTML

<html>
    <head>
    </head>
    <body>
        <div class="cm-wrapper-div"><div class="cm-drop-div" title="Settings"></div><div class="cm-clear" id="cmclearicon" title="Clear" style="display: none; "></div><input type="text" class="cm-search-box" id="cmsearchbox" placeholder="Search...(Ctrl+/)" maxlength="80" style="width: 226px; "></div>

    </body>
</html>

CSS

.cm-wrapper-div
{
    border-radius: 3px 3px 3px 3px;
    border: solid 2px #CCCCCA;
    width:100%;
    height: 26px;
    padding:0px;
    background-color:White;
    cursor:text;

}
.cm-drop-div
{
    width:20px;
    height:26px;
    float:right;
    background:url('../image/arrow_filter.png?v=2') no-repeat scroll 5px 11px transparent;
    cursor:pointer !important;
    border-left:1px solid #ccc;
}
.cm-clear
{
    width:16px;
    padding-left:2px;
    cursor:pointer !important;
    color:#38468F;
    font-weight:bold;
    position:relative;
    height:26px;
    background:url('../image/clear_icon.png?v=2') no-repeat scroll 0px 8px transparent;
    float:right;
}
.cm-search-box {
    width:100%;
    height: 26px;
    padding:0px;
    text-indent:3px;
    border:none;
    outline:none !important;
    color:#333;
    box-shadow:none !important;
        font: 12px/12px Tahoma,Arial !important;
    
}