JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<div class="sol br bc">
  <nav class="all-category-nav">
    <label class="open-menu-all" for="open-menu-all">
      <input class="input-menu-all" id="open-menu-all" type="checkbox" name="menu-open" />
      <span class="all-navigator">

        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
          <path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
        </svg>

        <span>Kategoriler</span> <i class="fas fa-angle-down"></i>
        <i class="fas fa-angle-up"></i>
      </span>


      <div class="side-wrapper2">

        <?php if (is_user_logged_in()) { ?>
        <nav class="sol-menu">


          <ul class="navbar_sol_menu">

            <li class="navbar__item">
              <a href="<?php echo bp_loggedin_user_domain(); ?>activity" class="navbar__link avatar">
                <?php bp_loggedin_user_avatar( 'type=thumb&width=50&height=50' );?>

              </a>

            </li>
            <li>
              <a>
            <li class="navbar__item">
              <span><?php _e('Profil', 'buddypress') ?></span>

              </a>

            </li>





            <li class="navbar__item">
              <a href="<?php echo bp_loggedin_user_domain(); ?>notifications/" class="navbar__link">
                <button class="account-button bildirim-zili" onclick="location.href='<?php echo bp_loggedin_user_domain(); ?>notifications/'" type="button">
                  <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell" class="svg-inline--fa fa-bell fa-w-14" role="img"...

CSS

.moving-steps {
    counter-reset: headings;
}
.moving-steps > li:before {
    background: none repeat scroll 0 0 #8F8888;
    border-radius: 15px;
    color: #FFFFFF;
    counter-increment: headings;
    content: counter(headings, decimal); 
    display: block;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 25px;
    line-height: 26px;
    margin-bottom: 0;
    margin-right: 5px;
    text-indent: 8px;
    width: 25px;
}