JSFiddle - React, Tailwind, and code Playground

by mikemrk

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
   <div class="container-fluid hero">
      <div class="container">
          <div class="row">

               <div class="col-sm-5 col-sm-offset-3">
                   <div class="infogen2">
                <h2>Check all destinations</h2>
                <div class="separator"></div>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
                   
                <div class="dropdown tari destinations">
                    <button class="btn btn-default dropdown-toggle btn-tari" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class ="textbtn">From which country?</span>
                           <span class="caret btnjos"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Germany</a></li>
                        <li><a href="#">France</a></li>
                        <li><a href="#">Spain</a></li>
                    </ul>
                   </div>
                      <div class="dropdown tari destinations" id="pana-la">
                    <button class="btn btn-default dropdown-toggle btn-tari" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class ="textbtn">To which country?</span>
                           <span class="caret btnjos"></span>
                 
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Germany</a></li>
                        <li><a href="#">France</a></li>
                        <li><a href="#">Spain</a></li>
                    </ul>
                   </div>
                    ...

CSS

body{
    font-family:GothamLight;
}
body h2{
    font-family:GothamMedium, sans-serif, Arial;
}

.jumbotron{
    font-family: GothamMediun;
    padding-top:100px;
    height:auto;
}

.navbar-brand{
    line-height:35px;
}
.navbar-fixed-top li a{
    line-height:35px;
}
.hero{
    padding-top:160px;
    color:white;
    background-color:gray;
    z-index:0;
}

    
.infogen{
    background-color: #333333;
    color:white;
    padding-top:25px;
    padding-bottom:25px;
    padding-left:40px;
    padding-right:30px;
    margin-bottom:30px;
    position:relative;
    bottom:-220px;
    
    
}
.infogen h1{
    font-family: GothamLight;
    font-size: 28px;
    line-height:30px;
}
.infogen .ingrosat{
    font-family: GothamMedium;
    margin-top:0px;
}

.infogen p{
    font-size:18px;
    margin-top:15px;
    padding-right:0px;

}
.infogen2{
 background-color: #0269a7;
    padding-left:30px;
    padding-right:25px;
    padding-top:25px;
    padding-bottom:25px;
    min-width:260px;
    margin-bottom:-90px;
    z-index:3;
}
.separator{ 
    background-color:white;
    height:2px;
    width:100%;
    width:120px;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:18px;
    margin-bottom:18px;
}
.infogen2 h2{
    font-size:20px;
    margin-bottom:0px;
    
}
.infogen2 p{
    margin-top:0xp;
    font-size:14px;d
}

.destinations{
    margin-top:20px;
    max-width:300px;
}


.tari{
  max-width:100%;  
}
#pana-la{
    margin-top:15px;
}
.btn-tari{
    height:45px;
    padding-right:0px;
    padding-left:0px;
    width:100%;
    font-size:13px;
    
}
.btn{
    border-radius: 0;
    border-style:solid;
    border-width: 1px;
    border-color:#bebebe;
    
}
.btnjos{
    position: absolute;
    left: 90%;
    top:45%;
    color
}
.textbtn{
    text-align:left;
    float:left;
    margin-left:20px;
}
#check{
    height:45px;
    width:300px;
    font-size:13px;
    width:100%;
    margin-top:15px;
    background-color:#005486;
    color:white;
    border: 0;
    ...