JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div class="dark">
          <form id="checkout" action="">
                 <span><input type="text" class="check" placeholder=" You have 2 items in cart">  
                <input id="submit" type="submit" value="Go to Checkout"></span>
                
              <div id="dropdown_container">
                  <div class="items">
                    <img src="images/block1.png" alt="Item" height="50" width="50"> 
                       
                             <input type="button" class="delete" value="">

                            
                        <p>Lorem Ipsum dollar</p> <p>99:-</p> <a href="">Read more</a>
                        
                 </div>
                      <div class="items">
                    <img src="images/block1.png" alt="Item" height="50" width="50"> 
                          <input type="button" class="delete" value="">
                        <p>Lorem Ipsum dollar</p> <p>99:</p> <a href="">Read more</a>

                 </div>
            </div> 
         </form>
                
</div>

CSS

.rounded {
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}
input[type=text]{
	color:#bcbcbc;
}





.dark{
	background: url('../images/dark_grey.jpg');
}
.dark input[type=text]{
	border:1px solid #2a2e31;
	background-color:#2d3035;
	 color: #9fa8b0;
}


.search {
	padding:6px 15px 6px 30px;
	margin:3px;
	background: url('../images/search.png') no-repeat 8px 6px;
}
#checkout
{

    		
        float:left;
        padding-top: 23px;
        padding-left: 5px;
	margin:0 auto;
        border:none;
}

#checkout {
	margin:0 auto;
        float:left;
        padding-top: 23px;
        padding-left: 5px;
	overflow: hidden; /* Clear floats */
}


.check {
	padding:6px 15px 6px 30px;
	margin:3px;
	background: url('../images/cart.png') no-repeat 8px 6px;
        border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
        float:left;
        width: 280px;
        border:none;
}


#submit
{
        float:left;
        position:relative;
        left: -29% ;
        top: 5px;
        -moz-border-radius:15px;
	-webkit-border-radius:15px;
        border-radius:15px;
        border:1px solid #2a2e31;
	background-color:#2d373e;
	color: #9fa8b0;
        cursor: pointer;
        height: 25px;
        font-size: 12px;
        width:130px;
     
}

#dropdown_container

{
    
    padding-top: 40px;
    background-color: #666666;
    width:320px;
    padding-right: 10px;
    background-color:#2d373e;   
    border-top: 0px solid black;
    border: 1px solid black;
    float: left;
}


#dropdown_container div
{
    
    margin-bottom: 5px;
}



.items img

{
   margin-top: 1px;
   margin-left: 5px;
   display: block;
   float:left;
   padding-right: 10px;
 
}
.items p
{
   color: #8f979f;
 text-align: left;
 font-size: 12px;
 margin: 4px;
}
.items a
{
    margin: 0px;
    font-size: 10px;
    font-weight: bold;
    text-align: left;
    cursor:pointer;
    text-decoration:underline;
    
    
}

.delete
{
margin-top:...

JavaScript

$(document).ready(function () {
    $("#submit").mouseenter(function(){
       $("#dropdown_container").slideDown();

  });
$("#dropdown_container").mouseleave(function(){
    $("#dropdown_container").slideUp();
});
    });