JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<table>
        <tr>
            <td class="verColorBar colorBarInstruct"></td>
            <td class="verInnerBar">
                <div class="banner">
                    <div class= "banner-content">
                        <p class="instructionsHeading">Where do you get your revenue?</p>
                        <div class="video">
                            <div class="video-play"></div>
                        </div>
                        <p class="noMarginTop">Add your major products, services, or other sources of revenue here. Try to organize them into sensible higher-level groups. With a fitness center, for example, you might have group memberships, individuals, personal training, and counter sales. A shoe store might organize its revenue into sneakers, casual shoes, children's shoes, and accessories. <a href="" class="link read-more">Read more...</a></p>
                        <p class="instruct-toggle-text">Keep your list relatively short. Trying to manage dozens of individual revenue streams can make your forecast hard to prepare and maintain. Also, remember you can compare your forecasted values with your actual results on the Scoreboard, so think about what categories of revenue will make the most sense for you there.</p> 
                        <p class="instruct-toggle-text">Note that grants, crowdfunding, donations, and other money that doesn't involve equity or payback should go here too.</p>  
                    </div>   
                    <div class="instruct-toggle-text">
                        <ul class="instruct-bullets">
                            <li>yep</li>
                            <li>ha ha</li>
                            <li>ha ha ha</li>
                        </ul>  
                    </div> 
                    <div class="video-content">
                        <p class="video-caption"></p>
                    </div>
                </div>    
            </td>
        </tr>
    </table> 
</div>

CSS

p {
    font-family: Open Sans,sans-serif; 
}
.instruct-bullets {
   margin: 15px 0 0 0;
   padding: 0px 30px;
   font-size: 14px;
   line-height: 22px;
}

.instruct-toggle-text {
    display: none;
}

.banner-content {
    display: table-cell;
    vertical-align: top;
}

.video-content {
 
}

.video {
    width: 200px;
    height: 120px;
    background: rgba(0,0,0,0.7) url('../img/video-still.png') 0px 0px no-repeat;
    display: table-cell;
    vertical-align: top;
    //padding-left: 20px;
    cursor: pointer;
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
}

.video-play {
    width: 12px;
    height: 16px;
    border-radius: 3px;
    padding: 10px 20px; 
    background: #4c9bee url('../img/play.png') 60% 50% no-repeat;
    margin: 42px auto;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.2);
}

.video-content .video-caption {
    text-align: center;
    font-weight: 600;
}

.read-more {
    font-size: 14px !important;
}

JavaScript

$(function(){
    $(".read-more").one("click",function() {
        $(this).css("display","none");
        $(.instruct-toggle-text).css("display","block");            
    });
});