JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<script src="https://code.jquery.com/jquery-3.1.0.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">
<div class="col-xs-12 col-sm-6 col-md-3 next_hostel" style="align-content: center;">

  <div class="img_banner">
    <img src="http://dev4.softreactor.com/static/images/plain/spotlight.png">
  </div>

  <div class="image-wrapper">
    <div class="back-img" style="background-image: url('http://dev4.softreactor.com//uploads/hostels/-hostel-32/096_givotnie_69.jpg'); width:127px; height:130px; align-content: center;  vertical-align: middle;border: 0; border: 0px solid red;  " id="hostel_32"></div>
  </div>






  <div class="hostel_title" style="margin-top: 5px; padding: 0px; height: 20px; border: 0px solid #000080; overflow:hidden;     box-shadow: 0 10px 10px -10px rgba(0,0,0, .2); ">
    <a href="http://dev4.softreactor.com/hostel/victoria/melbourne-region/inner-city/standard-hostel" title="32->Standard Hostel">32-&gt;Standard Hostel</a>
  </div>

  <div class="hostel_subtitle" style="margin-top: 5px;margin-left: 10px; padding: 0px; height: 20px;border: 0px solid brown; overflow:hidden; cursor: pointer;" title="Victoria">
    Victoria
  </div>


  <article class="hostel_text" style="margin-top: 5px; padding: 0px; height: 60px;border: 0px solid maroon;">
    32 - short_descr : </article>

  <div class="col-sm-12 " style="margin-top: 5px; padding: 0px; height: 20px;border: 0px solid #ffff00;">
    <img src="http://dev4.softreactor.com//static/images/plain/stars/stars4.png" alt="Good" title="Good" class="pull-left">&nbsp;<span class="text-money pull-right">AU$28.00</span>
  </div>

  <div class="col-sm-12 " style="margin-top: 5px; padding: 0px; height: 20px;border: 0px solid #ffff00;">
    <a href="http://dev4.softreactor.com/hostel/victoria/melbourne-region/inner-city/standard-hostel">
      <button...

CSS

/* CSS used here will be applied after bootstrap.css */

.next_hostel {
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 5px;
  border: 1px dotted #C8C8C8;
  height: 350px;
  width: 200px;
  /*overflow:hidden;*/
}

.image-wrapper {
  max-width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 2px 10px 10px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  align-content: center;
  alignment: center;
  padding: 2px;
}

.img_banner {
  height: 0px !important;
  width: 0px !important;
  overflow: visible;
  margin: 0px !important;
  padding: 0px !important;
  line-height: 0 !important;
  /*z-index: 100;*/
}

.back-img {
  /*padding-bottom: 66.66%;*/
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px dotted green;
  align-content: center;
  alignment: center;
}

.hostel_title {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  color: #336655;
  /*color: RED; */
  /* DEBUGGING */
}

.hostel_title a {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  color: #336655;
  /*color: RED; */
  /* DEBUGGING */
}

.hostel_subtitle {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  color: #40806B;
  padding-left: 10px;
}

.hostel_text {
  font-weight: normal;
  font-size: 14px;
  text-indent: 10px;
  text-align: left;
  color: #585858;
  float: left;
}

.back-img {
  margin: auto;
}