JSFiddle - React, Tailwind, and code Playground

HTML

<?php
/**
 * @package WordPress
 * @subpackage Custom Bellydance Theme

Template Name: Classes

*/

get_header(); ?>

        
        <div id="lg_left_col">
                    
            <div class="lg_col_top"></div>     
    
            <div id="lg_col_main">

                <h2 class="lg_col_heading"><?php the_title(); ?></h2>             

                <?php
                    // must use a variable for page id
                    // http://codex.wordpress.org/Function_Reference/get_page
                    $id = 4;
                    $p = get_page($id);
                    echo apply_filters('the_content', $p->post_content);
                ?>    

                <div class="post" id="classes_page">        
                    
                <ul id="post-id-<?php the_ID(); ?>">
                
                <?php
                $current_date = date('ymd');
                $wp_query = new WP_Query();
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;                
                $wp_query->query(array(
                    'category_name' => 'classes',
                    'meta_key' => '_date_compare',
                    'meta_compare' => '>=',
                    'meta_value' => $current_date,
                    'orderby' => 'meta_value',
                    'order' => 'ASC',
                    'posts_per_page' => 10,
                    'paged' => $paged
                )); 
                if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
        
               
                <li class="class_single" id="post-id-<?php the_ID(); ?>">

                    <div class="date_meta">
                        <div class="month"><?php  if( function_exists (event_date('start','M'))) ?></div>
                        <div class="day"><?php  if( function_exists (event_date('start','j'))) ?></div>
                    </div>
                    
                    <div...