JSFiddle - React, Tailwind, and code Playground

by marcbuils

HTML

<div class="settings-labels">
    <div class="settings-labels-name">Téléphone Nexus 6</div>
    <div class="settings-labels-price">399 €</div>
    <div class="settings-labels-oldprice">449 €</div>
    <div class="settings-labels-description">Le nexus 6 est la 6ème génération des téléphones conçu par Google pour mettre en avant le système le plus utilisé sur les téléphone portable : Android.</div>
    <div class="settings-labels-separator"></div>
    <ul class="settings-labels-informations">
        <li><span class="settings-labels-information-title">Veille :</span> <span class="settings-labels-information-value">10h</span></li>
        <li><span class="settings-labels-information-title">En communication :</span> <span class="settings-labels-information-value">3h</span></li>
        <li><span class="settings-labels-information-title">GPS :</span> <span class="settings-labels-information-value">Oui</span></li>
        <li><span class="settings-labels-information-title">Bandes :</span> <span class="settings-labels-information-value">EDGE / 3G / H+ / 4G</span></li>
    </ul>
    <img class="settings-labels-image" src="https://res.cloudinary.com/unionup/image/upload/w_218,h_150,c_pad/v1420140767/h4gzxeuq3dr1badkrjgz.jpg" />
    <img class="settings-labels-qrcode" src="http://upload.wikimedia.org/wikipedia/commons/d/d6/MicroQR_Example.png" />
    <div class="settings-labels-link"><span class="settings-labels-link-pre">http://les-commerces-agen.</span><span class="settings-labels-link-unionup">UnionUp</span><span class="settings-labels-link-post">.fr</span></div>
    <img class="settings-labels-logo" src="https://res.cloudinary.com/unionup/image/upload/w_203,h_203,c_pad/v1420139980/aq3immklheqibxetdeqt.jpg" />
</div>

CSS

@font-face {
  font-family: 'Myriad Pro';
  font-style: normal;
  font-weight: 400;
  src:  url(https://www.unionup.fr/fonts/MyriadProRegular.woff) format('woff');
}
@font-face {
  font-family: 'Dimbo';
  font-style: normal;
  font-weight: 400;
  src:  url(https://www.unionup.fr/fonts/DimboRegular.woff) format('woff');
}

.settings-labels {
  width: 437px;
  height: 620px;
  display: block;
  position: relative;
  background-color: white;
}

.settings-labels-name {
  left: 25px;
  top: 20px;
  width: 250px;
  font-size: 18pt;
  font-family: 'Dimbo';
  color: #fdca37;
  display: block;
  position: absolute;
}

.settings-labels-price {
  left: 235px;
  top: 162px;
  width: 172px;
  text-align: right;
  font-size: 30pt;
  font-family: 'Dimbo';
  color: #fdca37;
  display: block;
  position: absolute;
}
.settings-labels-oldprice {
  left: 235px;
  top: 200px;
  width: 172px;
  text-align: right;
  font-size: 15pt;
  font-family: 'Dimbo';
  color: #575756;
  display: block;
  position: absolute;
  text-decoration: line-through;
}

.settings-labels-qrcode {
  left: 285px;
  top: 20px;
  width: 124px;
  height: 124px;
  display: block;
  position: absolute;
}

.settings-labels-logo {
  left: 327px;
  top: 536px;
  width: 68px;
  height: 68px;
  display: block;
  position: absolute;
}

.settings-labels-image {
  left: 42px;
  top: 56px;
  width: 218px;
  height: 150px;
  display: block;
  position: absolute;
}

.settings-labels-description {
  left: 26px;
  top: 236px;
  width: 382px;
  text-align: justify;
  font-size: 18pt;
  font-family: 'Myriad Pro';
  display: block;
  position: absolute;
}

.settings-labels-link {
  left: 25px;
  top: 577px;
  width: 300px;
  display: block;
  position: absolute;
}
.settings-labels-link-pre {
  font-size: 12pt;
  font-family: 'Dimbo';
}
.settings-labels-link-unionup {
  font-size: 12pt;
  font-family: 'Dimbo';
  color: #fdca37;
}

.settings-labels-separator {
  background-color: #fdca37;
  left: 156px;
  top: 393px;
  width:...