JSFiddle - React, Tailwind, and code Playground

by cfree

HTML

<div id="wrapper">
    <div id="hero-wrapper" class="better">
            <img src="image.jpg" alt="Image" height="100" width="500"/>
        </div>
    <header>
        <p>Porta ut lacus ridiculus magna turpis, egestas platea, elit dapibus, sed dapibus natoque magna, dictumst aenean nisi, a. Mus a a dapibus pellentesque porta dictumst vut, sit, nisi. Arcu aenean sit, sed, odio platea porttitor sociis! Odio nec in dictumst tincidunt integer. Duis ac. Lacus dis aenean ut diam tempor purus a diam lorem. Odio nisi, aliquam phasellus dis nisi! Sed vel, quis tristique proin est? Integer dis quis. Ultricies, integer augue porta auctor ac mattis penatibus, duis, platea porta nascetur sagittis quis ac dolor, enim lectus cursus, mus tristique ultricies, tortor scelerisque sed turpis ut nascetur mus, platea lectus? Magna scelerisque ultrices dapibus eros tincidunt ut turpis urna, amet eros eu, ultrices a, egestas pulvinar nec etiam augue penatibus.<p>

        <p>Magna ut, purus! Dignissim ridiculus amet ridiculus ac lundium enim velit turpis dapibus ac diam sit cum nec dapibus. Facilisis, et scelerisque sed magna. Rhoncus sociis sed aliquet nunc? Cras augue, penatibus cum integer rhoncus odio cum nisi? Ut egestas natoque rhoncus nascetur in, mauris mauris pellentesque odio? Urna odio. Egestas. Turpis pid! Augue ac velit dolor risus eros! Magnis? Elit pulvinar elit vel. Penatibus massa vut rhoncus pellentesque nunc placerat, amet dolor ac tincidunt natoque magnis? In turpis, facilisis ultricies, enim nec egestas? Ultrices? Odio vut. Habitasse eros! Aenean rhoncus in ac aliquam! Ac ultricies tincidunt. Cum odio sed ultrices nisi sit lorem, dapibus, vut augue ultricies penatibus. Et, enim, dignissim proin dictumst dapibus, porttitor purus! Hac pid.</p>
    </header>
</div>

CSS

#wrapper {
    background: #333;
    padding: 10px;
    text-align: center;
}

header {
    width: 400px;
    background: gray;
    padding: 10px;
    text-align: left;
    margin: 0 auto;
    position: relative;
}

#hero-wrapper {
    background: silver;
    padding: 10px;
}

.awful {
    margin: 0 auto;
}

.meh {
    text-align: center;
    margin: 0 auto;
}

.better {
    margin: 0 -500px;
}

img {
    display: block;
    background: red;
    margin: 0 auto;
}