JSFiddle - React, Tailwind, and code Playground

by Gulam Jilani

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
        <div class="row">
            <h2>Similar Property</h2>
            <div class="col-md-4 PrpoetySection cool-link">
                <div class="Field">
                    <h4>Villa on Bollywood Boulevard</h4>
                    <div class="Location">
                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                        <span>767 E 1st Ave New Panvel</span>
                    </div>
                </div>
                <div class="BannerImage">
                    <img alt="" title="" src="http://www.hmc.ox.ac.uk/wp-content/uploads/2015/05/FLAT-3-APSLEY-COURT-2.jpg" />
                </div>
                <div class="Field">
                    <div class="InnePropertyDetail">
                        <ul>
                            <li>
                                <i class="fa fa-university" aria-hidden="true"></i>
                                <span>1000sq Ft</span>
                            </li>
                            <li>
                                <i class="fa fa-bed" aria-hidden="true"></i>
                                <span>2 Bedrooms</span>
                            </li>
                            <li>
                                <i class="fa fa-user-secret" aria-hidden="true"></i>
                                <span>Security Guard</span>
                            </li>
                            <li>
                                <i class="fa fa-bath" aria-hidden="true"></i>
                                <span>2 Bathrooms   </span>
                            </li>
                       ...

CSS

.col-md-4.PrpoetySection {background-color: #fff; display:inline-block;  padding:0; text-decoration: none; border-style:solid; border-width:1px 1px 5px; border-color:#ccc;}
        .col-md-4.PrpoetySection:hover{box-shadow:2px -2px 30px rgba(0,0,0,0.5); transform:translate(10px, 10px); transition:all ease 0.3s; border-bottom:none;}
        .col-md-4.PrpoetySection::after {background-color: #00b0b9;bottom: 0px;content: "";display: block;height:10px;left: 0;position: absolute;transition: all 0.2s ease 0s;width: 0;}
        .col-md-4.PrpoetySection:hover::after {width: 100%;//transition: width .3s; bottom:0;}
        .PrpoetySection .Field {float: left;width: 100%; padding:0 15px;}         
        .PrpoetySection .Field .Location ,.PrpoetySection .BannerImage img, .PrpoetySection .SortDetail{display: inline-block;width: 100%;}
         .PrpoetySection .Field .Location {padding-bottom: 18px;  box-sizing: border-box;}
        .PrpoetySection h4 {margin-bottom: 0;}
        .PrpoetySection .Field .Location i, .PrpoetySection .Field .Location span, .InnePropertyDetail li span, .PrpoetySection .SortDetail .Section i{color: #959494;}
        .PrpoetySection:hover .SortDetail .Section.Hover i, .PrpoetySection:hover .SortDetail .Section.Hover span{color:#00b0b9;}
        .InnePropertyDetail > ul {display: inline-block;margin: 0;padding:20px 0 0;width: 100%;}
        .InnePropertyDetail li {float: left;list-style: outside none none;width: 50%;  margin: 0 0 20px;}
        .InnePropertyDetail li i {font-size: 25px; color:#00b0b9;}
        .PrpoetySection hr {border-color: #ccc;color: #ccc;float: left;margin: 0;width: 100%;}
       .PrpoetySection .SortDetail .Section {float: left;width: 50%; position:relative;} 
       .PrpoetySection .SortDetail .Section  > ul, #content ul {margin: 0;padding: 0;}
       .PrpoetySection .SortDetail .Section  > ul li, #content ul li{float: left;list-style: outside none none;width:33.33%; cursor: pointer;}
       .PrpoetySection .SortDetail...

JavaScript

$(document).ready(function () {

            $('#button').click(function (e) {

                e.preventDefault(); // stops link from making page jump to the top
                e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
                $('#content').toggle();

            });

            $('#content').click(function (e) {

                e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too

            });

            $('body').click(function () {

                $('#content').hide();

            });

        });