JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<div class="content">
<div class="widgets dim-action-corral-Section">
    <div class="widget text expanded edit ckeditor-ready" style="visibility: visible;">
        <div class="click-to-edit" style="background: none;">
            <div class="tuck">
                <div class="flag"> <span class="click-to-edit-text" id="ext-gen5">Click to edit this text</span>

                </div>
            </div>
        </div>
        <div class="header" unselectable="on">
             <h2>
               <span class="title">Market Size &amp; Segments</span>
                    </a>
                </h2>
        </div>
        <div class="container-wrapper">
            <div class="container">
                <div class="preview preview-with-loader" id="ext-gen4"></div>
                <div class="clearfix"></div>
                <div class="clean-slate">

                    <div class="x-clear"></div>
                </div>
                <div class="clearfix"></div>
                <div class="edit">
                    <div class="instructions" style="">
                        <ul class="instructions-nav">
                            <li class=""> <a href="javascript:void(0);" class="active"><span>Instructions</span></a>

                            </li>
                            <li class=""> <a href="javascript:void(0);" class="inactive"><span>Examples</span></a>

                            </li>
                        </ul>
                        <div class="help-pages">
                            <div class="help-page instructions-text" style="display: block;">
                                <p>Describe your target market. Who is your ideal customer? Who are the people or companies who suffer from the problem that you are solving? How do they break down into segments — that is, recognizable customer types with similar demographics, needs, and expectations? How many potential customers does your research suggest there are in each segment?</p>
            ...

CSS

ol, ul {
    list-style: none;
}

.content {
    padding: 30px;
}

.widgets {
    width: 100%;
    margin: 25px 0 20px;
    float: right;
}

.widgets .widget {
    postition: relative;
    margin: 0px 0px 25px;
    padding: 2px;
    clear:both;
}

.widgets .widget {
    font-family: 'Open Sans', sans-serif;
    color: #3f484b;
}

.widgets .widget .click-to-edit {
    display: none;
    position: absolute;
    right: -32px;
    top: 7px;
    float: right;
    height: 30px;
    width: 58px;
    z-index: 1000;
}

.widgets .edit .header {
    background: #f9f9f9;
    border-top: 1px solid #d5dbe1;
    border-right: 1px solid #d5dbe1;
    border-left: 1px solid #d5dbe1;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.widgets .widget .header {
    display: block;
    color: #464646;
    line-height: 40px;
    height: 40px;
    position: relative;
    z-index: 1001;
}

.widgets .widget .container-wrapper {
    background: #fff;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    display: block;
}

.widgets .widget .container .instructions {
    clear: both;
}

.widgets .edit .instructions-nav {
    background: #f9f9f9;
    border-bottom: 1px solid #d5dbe1;
    border-right: 1px solid #d5dbe1;
    border-left: 1px solid #d5dbe1;
    margin: 0;
}

.widgets .widget .container .instructions .instructions-nav {
    clear:both;
    height: 31px;
    padding: 0 5px;
}

.header h2 {
    cursor: default;
    padding-left: 10px;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

.header h2 span.title {
    color: #3f484b;
    font-weight: 600;
    padding-left: 0;
    display: block;
    float: left;
    padding: 0 6px 0 0;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    text-decoration: none;
}

.instructions .instructions-nav li a span {
    border-top: none;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    display: block;
    float: left;
    padding: 0px 10px;
    line-height:...