JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<?php $mapCoordinates = json_decode($data->contact->map, true); ?>
<style type="text/css">
  .f_add_box a {
    text-decoration: none;
  }

</style>


<?php if ($data->module != '404'): ?>


<footer class="parallax-window inner_body img" data-src="<?= ROOT_URL.'uploads/media/'.$data->contact->home_page_background ?>">
  <div class="inner-img" style="width: 100%; height: 200%; position: absolute; bottom: 0; left: 0; background:url('<?= ROOT_URL.'uploads/media/'.$data->contact->home_page_background ?>') no-repeat; background-position: center top; background-size: cover;"></div>
  <div class="footer_f_stick" style="left: 25%;"></div>
  <div class="footer_f_stick" style="left: 50%;"></div>
  <div class="footer_f_stick" style="left: 75%;"></div>
  <!-- <div class="noise" style="z-index: 0;"></div> -->
  <!-- <div class="f_back"></div> -->
  <div class="f_add_box">
    <span class="f_addr uppercase"><?=L('_address_')?>:</span>
    <a href="https://www.google.com/maps/search/?api=1&query=<?= $mapCoordinates['lat'] ?>,<?= $mapCoordinates['lon'] ?>" target="_blank" rel="noopener">
      <span class="f_r_addr uppercase"><?= $data->contact->address ?><i>
    </a>
    <svg height='20' width='20' style="vertical-align: -4px;" fill="#d61c4b" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
      <path d="M50,10c-18.401,0-33.333,14.915-33.333,33.333c0,9.199,3.73,17.532,9.766,23.567L50,90l23.574-23.105  c6.035-6.029,9.766-14.362,9.759-23.568C83.333,24.929,68.411,10,50,10z M50,60c-9.206,0-16.667-7.461-16.667-16.667  S40.794,26.667,50,26.667s16.667,7.46,16.667,16.666S59.206,60,50,60z"></path>
    </svg>
    </i></span>
  </div>
  <div class="footer_stick"></div>
  <div class="f_tel_box">
    <a href="tel:<?= $data->contact->tel ?>" class="my-number"><?= $data->contact->tel ?></a>
    <span class="wow slideInUp" data-wow-duration="1.5s"></span>
...