JSFiddle - React, Tailwind, and code Playground

HTML

<div id="animWords">
        <p style="top: 12px;" class="left">Let leads and clients reach you quickly – with consistently professional and correct details.</p>
        <p style="top: 178px;" class="left">Make all logos in every signature meet brand standards – don’t let mail let you down.</p>
        <p style="top: 344px;" class="left">Promote product launches, events and special offers to the people who care most – all your contacts.</p>
        <p style="top: 12px;" class="right">Put a ‘certification’ mark in your signature – show everyone you’re the provider of choice, instantly.</p>
        <p style="top: 178px;" class="right">Get Recommendations on LinkedIn, Fans on Facebook and more – let readers connect in a click.</p>
        <p style="top: 344px;" class="right">Protect staff from legal pitfalls and meet regulations (like the UK Companies Act).</p>
    </div>


<div id="animImgs">
    <img src="http://static1.exclaimer.com/email-signature-anatomy_1_958x558.png" alt=" " title=" " width="958" height="558" />
        <img src="http://static1.exclaimer.com/email-signature-anatomy_2_958x558.png" alt=" " title=" " width="958" height="558" />
        <img src="http://static1.exclaimer.com/email-signature-anatomy_3_958x558.png" alt=" " title=" " width="958" height="558" />
        <img src="http://static1.exclaimer.com/email-signature-anatomy_4_958x558.png" alt=" " title=" " width="958" height="558" />
        <img src="http://static1.exclaimer.com/email-signature-anatomy_5_958x558.png" alt=" " title=" " width="958" height="558" />
        <img src="http://static1.exclaimer.com/email-signature-anatomy_6_958x558.png" alt=" " title=" " width="958" height="558" />
    </div>

CSS

#animWords { position: absolute; left: 0; top: 100px; z-index: 35; width: 100%; height: 500px; }
#animWords p { position: absolute; display: none; margin: 0; padding: 10px; height: 127px; overflow: hidden; font-size: 0.95em; }
#animWords p.left { left: 0; width: 179px; text-align: right; }
#animWords p.right { right: 0; width: 168px; }
#animImgs { position: absolute; top: 100px; left: 0; z-index: 20; width: 100%; height: 558px; background: url('<%= Website2012.GlobalSiteFunctions.Static1Url("email-signature-anatomy_base_958x558.png") %>'); }
#animImgs img { position: absolute; top: 0; left: 0; z-index: 30; }

JavaScript

var timer;
        var counter = 0;

        $(function () {

            // Additional page delay to ensure the page has time to fully load and render
            setTimeout(function () {
                $('#animImgs img').hide();
                startSlides();
            }, 2000);

            $('#resetButton').click(function (e) {
                e.preventDefault();
                resetSlides();
                startSlides();
            });

        });

        function startSlides() {
            timer = setInterval(function () {
                $('#animImgs img').eq(counter).fadeIn();
                $('#animWords p').eq(counter).fadeIn();
                counter++;

                if (counter === 6) {
                    clearInterval(timer);

                    setTimeout(function () {
                        $('#resetButton').fadeIn(1000);
                    }, 2000);
                }
            }, 2000);
        }

        function resetSlides() {
            counter = 0;
            $('#animImgs img, #animWords p, #resetButton').fadeOut(200);
        }