JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
    <body id="page-top">
    
    <div class="card" >
        <!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
        <div class="search-box">
            <div class="form-group">
                <div class="icon-addon addon-lg">
                    <input type="text" placeholder="Search Class" class="form-control" id="email">
                    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
                </div>
            </div>
            <button class="btn-checkin">Check in</button>
        </div>
    </div>
    <div id="child">
      <div class="container-fluid drop-shadow">
        <div class="row">
          frsjafksdalkdfsa
        </div>
        fsdfdasasd
      </div>
    </div>

CSS

.card{
            border:0px solid;
            position:relative;
            height:200px;
            background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
            background-size:cover;
        }
        @media only screen and (min-width: 768px) {
          .card{
            height:335px;}
        }
        
        .card img {
          width:100%;
        }
        
        .search-box {
          position : absolute;
          display:inline-block;
          bottom:-30px;
          left:0;
          right:0;
          padding:15px;
          text-align:center;
        }
    
        .drop-shadow {
            -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
            box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
            border-radius:0px;
        }
        .container-fluid{
            width:auto
        }
        .container-fluid.drop-shadow {
            margin-top:2%;
            margin-left:5%;
            margin-right:5%
    
        }
    
        .img-fluid {
            height: 200px;
        }
    
        #child{
                width:100%;
                height: 20px;
                margin: auto;
                text-align: center;
                margin-top: 40px;
        }
        .form-group {
          width:100%;
          margin-bottom:10px;
        }
        .btn-checkin{
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            color: #fff;
            border-color: #EC008c;
            text-transform: uppercase;
            background-color: #EC008c;
            font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
            padding: 0.375rem .75rem;
            font-size: 13px;
            border-radius: .25rem;
    }
    
    .icon-addon {
      position:relative;
    }
    .icon-addon label {
        position: absolute;
        left: 2px;
        top: 2px;
        padding: 8px;
        font-size: 20px;
    }
    .icon-addon...