JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="rotator-item">
  <div class="rotator-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci mi, finibus a ultrices quis, pulvinar at enim. Nullam eu tortor eget libero tempus congue. Mauris massa nunc, consectetur vitae risus eu, pretium laoreet diam. Nullam auctor vehicula ipsum a lobortis.<br>Cras urna arcu, eleifend vel finibus in, fermentum at nibh. Vestibulum vestibulum sit amet massa et interdum. Nam vel consectetur felis. Morbi condimentum dapibus odio, at placerat tellus. Curabitur placerat quam a felis posuere, id congue neque interdum. Donec a ligula sed arcu posuere efficitur rutrum ut est. Praesent semper nisi et mi semper congue."
  </div>
</div>

CSS

.rotator-item {
        width: 100%;
        border: none;
        height: 100%;

    }

    .rotator-img {
        width: 100%;
        display: block;
        height: 90%;
    }

        .rotator-img img {
            max-height: 100%;
        }

    .rotator-text {
        background-color: red !important;
        text-align: left;
        padding-top: 0px;
        overflow-wrap: break-word;

    }