<div
    class="marquee"
    data-marquee="Tiny text"
></div>

<div
    class="marquee"
    data-marquee="Short text short text"
></div>

<div
    class="marquee"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee"
    data-marquee="Large text large text large text large text large text large text large text large text"
></div>

<div
    class="marquee marquee-speed-drowsy"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-speed-slow"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-speed-normal"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-speed-fast"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-speed-swift"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-speed-hyper"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-direction-left"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-direction-right"
    data-marquee="Medium text medium text medium text"
></div>

<div
    class="marquee marquee-direction-alternate"
    data-marquee="Text"
></div>

<div
    class="marquee marquee-movement-steps20"
    data-marquee="Text"
></div>

<div
    class="marquee marquee-movement-steps10"
    data-marquee="Text"
></div>