JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script src="http://malsup.github.io/jquery.easing.1.3.js"></script>
<script src="http://malsup.github.io/chili-1.7.pack.js"></script>
<div id="wrapper">
    <div class="section">
        <div class="col span_1_of_3">
            <h2>What is Brand Identity?</h2>The team at Little Rocket are genuinely excited about your next big idea. We understand that your brand is your business! Your brand must express your personality, deliver your core values and enable you to stand out from your competitors.</div>
        <div class="col span_1_of_3">
            <h2>Our Process</h2>We are at our best when we meet face to face with our clients and sit down to discuss exactly what they require. We work closely with our clients, gathering essential information, examining your business and your competitors in order to best represent you.</div>
        <div class="col span_1_of_3">
            <h2>Continuity is key</h2>We grow our clients brand beyond just the mark itself. Our process aims to deliver a customised visual system across various print mediums, including print, package design, advertising, layouts, illustration, billboards, illustration, and much more. This helps our clients maintain brand consistency.</div>
        <div class="clear"></div>
    </div>
    <div class="show">
        <div id="s3" class="questions">
            <div class=""> <strong>Question One</strong>

                <br />What cat won the fight in the first video?
                <br />
                <br />
                <input type="radio" name="ff" value="White Cat">White Cat</input>
                <input type="radio" name="" value="Black Cat">Black Cat</input>
                <input type="radio" name="" value="None">None</input>
            </div>
            <div class="">Question Two</div>
            <div class="">Question Three</div>
        </div> <a id="prev3" href="#">Prev</a>  <a id="next3" href="#">Next</a>

   ...

CSS

body {
    margin: 0;
    padding: 0;
    background-color:#e8e8e8;
}
.span_1_of_3 {
    width: 27%;
}
.col {
    display: block;
    float: left;
    margin: 0 0 0 5%;
}
.section {
    margin: 0px auto;
    max-width: 1024px;
    padding: 0;
}
#wrapper {
    max-width:1024px;
    margin:0px auto;
    background-color:#fff;
}
.show {
    display:none;
    background-color: #ccc;
    height:200px;
    margin-left: 30px;
    clear:both;
    width:800px;
    padding:15px;
}
.questions {
    clear:both;
    height:100px;
}
.button {
    background-color: #ccc;
    height:40px;
    width:100px;
    margin-left:30px;
    cursor: pointer;
    text-align: center;
    line-height:40px;
}
.container {
    border:1px solid red;
    margin:30px;
    clear:both;
    width:100%;
}
.left {
    height:600px;
    width:400px;
    border: 1px solid blue;
    float:left;
    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.right {
    height:500px;
    width:100%;
    border: 1px solid blue;
    float:left;
    margin-left:15px;
    margin-top: 15px;
    margin-right: 15px;
}
.clear {
    clear:both;
}

JavaScript

$.fn.cycle.defaults.timeout = 6000;
$(".show").hide();
$(function () {

    $('#s2').after('<div id="nav" class="nav">').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav',
        next: '#next2',
        prev: '#prev2'

    });
});
$(function () {

    $('#s3').before('<div id="nav" class="nav">').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav',
        next: '#next3',
        prev: '#prev3'

    });
});



$(".button").click(function () {
    $(".show").slideToggle("slow", function () {
        // Animation complete.
    });
});