JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<div class="layout">
    <ul class="resetpad">
        <li><a class="layout1" href="javascript::" data-layout=".layoutblock1"> Layout #1 </a>
        </li>
        <li><a class="layout2" href="javascript::" data-layout=".layoutblock2"> Layout #2</a>
        </li>
        <li><a class="layout3" href="javascript::" data-layout=".layoutblock3"> Layout #3</a>
        </li>
    </ul>
    <div class="clearfix"></div>
</div>
<!--BOF wrapper-->
<div id="wrapper" style="max-width:100%; margin:0 auto; background:#333" class="layoutblock1">
    <div id="container" style="max-width:100%; margin:0 auto; color:#FFF; padding:20px 0;font-family: 'Open Sans', sans-serif; font-size:13px;">
        <div id="logo" style="padding:0 0 0 15px;font-family: 'Kaushan Script', cursive; font-size:28px;color:#FFF;float:left; width:45%">x10selling</div>
        <div id="day" style="padding:0 15px 0 0px;font-family: 'Kaushan Script', cursive;float:right; width:45%; text-align:right;font-size:20px">Day 1</div>
        <div style="clear:both;display:block"></div>
        <div id="inner-content" style="color:#5A5A5A;padding:15px 10px 15px 10px; margin:20px 0 0 0;line-height:20px; text-align:justify;background:#FFF ">
            <p>Hi <strong>Employee,</strong>
            </p>
             <h4 style="margin:0; ">Email Lesson Title</h4>

            <p>Lorem ipsum dolor sit amet, aconsectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto.</p>
            <div style="border-bottom:1px dashed #BCBCBC; margin:10px 0"></div>
             <h4>Web Lesson Title</h4>

            <p>Lorem ipsum dolor sit amet, aconsectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus...

CSS

a.active {color: red}

.layoutblock1, .layoutblock2, .layoutblock3 {
    display: none;
}

JavaScript

var $a = $(".layout a").click(function (e) {
    e.preventDefault();
    $a.removeClass('active').filter(this).addClass('active');
    
    $('.layoutblock1, .layoutblock2, .layoutblock3').hide();
    $($(this).data('layout')).show();
});