JSFiddle - React, Tailwind, and code Playground

by rvpatel

HTML

<?php
            $icons = array('apple', 'foursquare', 'thumbs-up');
            $args = array(
                'post_type' => 'page',
                'post_status' => 'publish',
                'meta_key' => 'page_home',
				'meta_value' => 1,
                'order' => 'ASC',
                'orderby' => 'menu_order',
                'posts_per_page' => 3
            );

            $query = new WP_Query($args);
            $i = 0;
            if ($query->have_posts()):
                while ($query->have_posts()):
                    $query->the_post();
                    ?>

                    <div class="one-fourth">
                        <div class="feature-block">
                            <div class="feature-block-title">
                                <div class="feature-block-icon">
                                    <i class="<?php echo 'icon-' . $icons[$i]; ?>"></i><span></span>
                                </div>
                                <h4><?php echo get_post_meta($post->ID, 'page_subheading', true); ?></h4>
                                <?php echo get_post_meta($post->ID, 'page_short_desc', true); ?>
                            </div>
                        </div>

                        <a class="button grey small round" href="<?php echo get_permalink(); ?>">Read More<i class="icon-angle-right right"></i></a>
                    </div>

                    <?php
                    $i++;
                endwhile;

            endif;
            wp_reset_query();
            ?>