JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<div class="ex-1">
    <p class="copy">Hello</p>
</div>
<input type="submit" class="ex-1-change-text" value="Change Text"></input>
<div class="ex-2">
    <div class="copy">
        <p class="date copy-el">Next Friday</p>
        <div class="divider copy-el"></div>
        <div class="time copy-el">9:30 Pacific</div>
    </div>
</div>
<input type="submit" class="ex-2-change-text" value="Change Text">

CSS

input[type="submit"] {
    padding: 10px;
}
.copy {
    /* always good to specify position */
    /* when using top or left */
    position: relative;
    top: 50%;
    /* height doesn't change very much so we can 
       hard code this, number is eyballed */
    margin-top: -20px;
}
.ex-1, .ex-2 {
    background: gray;
    width: 300px;
    height: 250px;
    text-align: center;
    margin: 10px 0;
    /* very important for IE */
    position: relative;
}
.ex-1 .copy {
    background: red;
    display: inline-block;
}
.change-text {
    padding: 10px;
}
.ex-2 .copy {
    background: red;
    overflow: hidden;
    display: inline-block;
}
.ex-2 .copy-el {
    float: left;
}
.ex-2 .copy .date {
}
.ex-2 .copy .divider {
    width: 5px;
    height: 20px;
    background: black;
    margin: 0 5px;
}
.ex-2 .copy .time {
}
}

JavaScript

/* example 1 */
var ex1Text = [
    'Hello',
    'Hello World',
    'Foo Bar Baz',
    'Next Friday | 9:30 Pacific'];

var ex1CurrIndex = 0;
var $ex1 = $('.ex-1');
$('.ex-1-change-text').on('click', function (e) {
    e.preventDefault();

    ex1CurrIndex = ex1CurrIndex >= ex1Text.length - 1 ? 0 : ++ex1CurrIndex;
    $ex1.find('.copy').text(ex1Text[ex1CurrIndex]);
});

/* exampl 2 */
var ex2Text = [{
    date: 'Next Friday',
    time: '9:30 Pacific'
}, {
    date: 'Tomorrow',
    time: '10:00 am Eastern / Pacific'
}, {
    date: 'Thursday',
    time: '5:00 am Central'
}];
var ex2CurrIndex = 0;
var $ex2 = $('.ex-2');

$('.ex-2-change-text').on('click', function (e) {
    e.preventDefault();
    var data;

    ex2CurrIndex = ex2CurrIndex >= ex2Text.length - 1 ? 0 : ++ex2CurrIndex;
    data = ex2Text[ex2CurrIndex];

    $ex2.find('.date').text(data.date);
    $ex2.find('.time').text(data.time);
});