JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<ul class="df jcs alg">
  <li class="plr">
    <?php echo do_shortcode('[wp_ulike]'); ?>
  </li>
  <li class="plr df pstr jc alg mla">
    <a class="df alg jc" href="<?php comments_link(); ?>" title="Yorum yap">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="df alg mr jc" viewBox="0 0 16 16">
        <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
        <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
      </svg>
      <p><?php comments_number( '', '1', '   %' ); ?></p>
    </a>
    <?php yazinin_yorumlarini_goster(); ?>
  </li>
  <li class="plr df alg jc cp">
    <span class="share plr df alg jc cp">Paylaş
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="ml" viewBox="0 0 16 16">
        <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" />
      </svg>
    </span>
    <ul class="df psta pstab lft rgt zip bck alg jc fldc sh dropdown-menu" id="shareDropdown">
      <div class="mrg w100 df">
        <div class="df mlr aic jcs w100">

          <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink()) ?>" target="_blank" rel="noopener noreferrer nofollow">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svgh">
              <path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9...