JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package mintikdotcomgenerate
 */

get_header();
?>
<div class="genel-cerceve pt">

  <?php get_template_part('sidebar1'); ?>
  <div class="orta-alan pl pr pb" id="content">
    <div class="govde padder">

      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

      <article class="makale">
        <div class="yazar-resmi">
          <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">
            <?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
            <div class="border"></div>
          </a>
        </div>
        <div class="yazi-kutusu">
          <div class="entry-header">

            <div class="yazar-ve-tarih">
              <strong class="yazar-ismi">
                <?php the_author(); ?>
                <a class="user-link" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"> @<?php the_author_meta('nicename');  ?></a>

              </strong>
              <div class="yayin-tarihi">

                <span class="comments-link">
                  <svg width="13px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment" class="svg-inline--fa fa-comment" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path fill="currentColor" d="M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z"></path>
                  </svg>
                  <?php comments_popup_link( __( 'Yorum...

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;
}