JSFiddle - React, Tailwind, and code Playground

Reside V.3 Base - Property Lists

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/bootstrap.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/custom.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/styles.css">
<script src="http://jennperrin.com/edge/Reside-V3/js/bootstrap.min.js"></script>
<script src="http://jennperrin.com/edge/Reside-V3/js/custom.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container page_block noTopBorder noBotBorder">
    <div class="header-cont">
        <div class="row">
            <div class="col-md-6">
                <div class="contact-text">
                    Need Help? <i class="fa fa-phone"></i> (555) 555-5454					</div>
            </div>
            <div class="col-md-6">
                <div class="header-social-links">
                    <a href="http://facebook.com" class="facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a><a href="http://google.com" class="google" data-toggle="tooltip" data-placement="bottom" title="Google+"><i class="fa fa-google-plus"></i></a><a href="http://linkedin.com" class="linkedin" data-toggle="tooltip" data-placement="bottom" title="LinkedIn"><i class="fa fa-linkedin"></i></a><a href="http://twitter.com" class="twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter"></i></a>					</div>
            </div>
        </div>
        
        <hr class="mt-10 mb-10" />
        
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
               ...

CSS

.propCont {
  padding: 0.5em 1em 1em;
  max-width: calc(1400px + 1em);
  margin: 0 auto;
  overflow: hidden;
}
.propCont .prop-posts .featured {
  width: 100% !important;
  height: 250px !important;
  margin: 0.5em 0 1em 0 !important;
}
.propCont .prop-posts .featured .image {
  height: 250px !important;
}
.propCont .prop-posts .featured .propcont {
  height: 250px !important;
}
.propCont .prop-posts .prop-row {
  display: flex;
}
.propCont .prop-posts .prop-row .post:last-child {
  margin-right: 0 !important;
}
.propCont .prop-posts .post {
  flex: 1;
  overflow: hidden;
  background: white;
  height: 200px;
  -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  margin-right: 1em;
  margin-bottom: 1em;
}
.propCont .prop-posts .post:hover {
  -moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
}
.propCont .prop-posts .post:hover .image {
  opacity: 0.8;
}
.propCont .prop-posts .post .image, .propCont .prop-posts .post .propcont {
  display: inline-block;
  position: relative;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.propCont .prop-posts .post .image {
  float: left;
  width: 50%;
  height: 200px;
  background-size: cover;
  background-position: center center;
}
.propCont .prop-posts .post .image .time {
  background: rgba(255, 255, 255, 0.5);
  width: 50px;
  text-align: center;
  padding: 0.5em 0;
  color: #444;
}
.propCont .prop-posts .post .image .time .date {
  font-weight: bolder;
}
.propCont .prop-posts .post .image .time .month {
  font-size: 0.7rem;
}
.propCont .prop-posts .post .propcont {
  padding: 0.5em 1em;
  width: 50%;
  -moz-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: -2px 0 2px -1px rgba(0,...