JSFiddle - React, Tailwind, and code Playground

by mobidevelop

HTML

<ul class="hotels">
    <li class="hotel">
        <a href="#">
        <div class="detail">
            <div class="image">
                <img src="http://www.choicehotels.com/media/eBrochure/ebrochure/AZ/AZ140/AZ140A1.JPG" />
            </div>
            <h3 class="name">Hotel Name</h3>
            <div class="rating">Rating</div>
            <div class="rate">
                <span class="stricken"><span class="integral">120</span><span class="fractional">99</span></span>
                <span class="effective"><span class="integral">120</span><span class="fractional">99</span></span>
            </div>
            <div class="distance">1.2 mi</div>
        </div>        
        <div class="banner">
            20%
        </div>
        </a>
    </li>
    <li class="hotel">
        <a href="#">
        <div class="detail">
            <div class="image">
                <img src="http://www.choicehotels.com/media/eBrochure/ebrochure/AZ/AZ140/AZ140A1.JPG" />
            </div>
            <h3 class="name">Hotel Name</h3>
            <div class="rating">Rating</div>
            <div class="rate">
                <span class="stricken"><span class="integral">120</span><span class="fractional">99</span></span>
                <span class="effective"><span class="integral">120</span><span class="fractional">99</span></span>
            </div>
            <div class="distance">1.2 mi</div>
        </div>        
        </a>
    </li>
    <li class="hotel">
        <a href="#">
        <div class="detail">
            <div class="image">
                <img src="http://www.choicehotels.com/media/eBrochure/ebrochure/AZ/AZ140/AZ140A1.JPG" />
            </div>
            <h3 class="name">Hotel Name</h3>
            <div class="rating">Rating</div>
            <div class="rate">
                <span class="stricken"><span class="integral">120</span><span class="fractional">99</span></span>
                <span class="effective"><span...

CSS

* {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.hotels .hotel {
    list-style-type: none;
    border-bottom: 4px solid #F4AA00;
}

.hotels .hotel a {
    text-decoration: none;
    color: #222222;
}

.hotels .hotel .detail {
    height: 100px;
}

.hotels .hotel .detail .name {
    padding-top: 4px;
}

.hotels .hotel .image {
    width: 128px;
    height: 100px;
    overflow: hidden;
    float: left;  
}

.hotels .hotel .image img {
    height: 100% 
}

.hotels .hotel .distance {
    position: absolute;
    right: 8px;
    bottom: 20px;
}

.hotels .hotel .rate {
    font-size: 32px;
}

.hotels .hotel .rate .fractional {
    vertical-align: super;
    font-size: 12px;    
}

.hotels .hotel .rate .stricken {
    top: 8px;
    vertical-align: super;
    text-decoration: line-through;
    font-size: 24px;
    color: #D0D0D0;
}

.hotels .hotel .banner {
    line-height: 25px;
    text-align: center;
    background: #888888;
    color: #DDDDDD;
}