JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="advantages" class="inner_body">
  <div class="m_n_i_color_stick"></div>
  <div class="stick" style="left: 25%;"></div>
  <div class="stick" style="left: 50%;"></div>
  <div class="stick" style="left: 75%;"></div>
  <div class="rotate_stick"></div>
  <?php include 'page_banner.php'; ?>
  <?php include 'about_submenu.php'; ?>
  <div id="team_body">
    <div class="body">
      <?php foreach ($data->team as $key => $value): ?>
      <div class="box wow kufuna _Z item">
        <div class="inner">
          <div>
            <div class="img" style="background: url('uploads/media/<?= $value->image ?>'); background-size: cover; background-position: center;"></div>
            <?php $info = explode(' ', $value->name); ?>
            <?php if(count($info) == 2): ?>
            <h2 style="margin-bottom: 0;"><?= $info[0] ?></h2>
            <h2 style="margin: 0;"><?= $info[1] ?></h2>
            <?php else: ?>
            <h2 style="margin: 0;"><?= $info[0] ?></h2>
            <?php endif;?>
          </div>
          <?php if($value->position): ?>
          <h3 class="pos"><?= $value->position ?></h3>
          <?php endif; ?>
        </div>
      </div>
      <?php endforeach ?>
    </div>
  </div>

</div>

SASS

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}