Animation

Robotech
/
Advanced UI
/
Animation
Masic Animation

CSS3 Animations with special effects.

Default badge

Magic Effects

Bling

Static Effects

Static Effects Out

Perspective

Rotate

Slide

Math

Tin

Bomb

Boing

On The Space


<div class="text-center mb-8">
    <h4 class="font-medium text-lg dark:text-slate-300">Masic Animation</h4>
    <h6 class="mb-5 text-slate-400">CSS3 Animations with special effects.</h6>
    <div class="relative inline-block mx-auto">
        <div id="animate-me">
            <div class="shadow-md p-5 inline-block rounded-full">
                <img src="assets/images/logo-sm.png" alt="" class="w-20 h-20">
            </div>
        </div>
    </div>
</div>


<div id="content" class="text-center  container-magic-bottom">
    <div style="height: 450px;" data-simplebar>
        <h5 class="mb-3 text-base font-medium dark:text-slate-400">Magic Effects</h5>
        <div class="flex flex-wrap gap-2 justify-center">
            <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
                data-test="vanishIn">Masic</button>
                
            <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
                font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="twisterInDown">TwisterInDown</button>

            <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
                font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
                data-test="twisterInUp">TwisterInUp</button>

            <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
                font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
                data-test="swap">Swap</button>
        </div>

    <h5 class="my-3 text-base font-medium dark:text-slate-400">Bling</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="puffIn">PuffIn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="puffOut">PuffOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="vanishIn">VanishIn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="vanishOut">VanishOut</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Static Effects</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openDownLeft">OpenDownLeft</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openDownRight">OpenDownRight</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openUpLeft">OpenUpLeft</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openUpRight">OpenUpRight</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openDownLeftReturn">OpenDownLeftReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openDownRightReturn">OpenDownRightReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openUpLeftReturn">OpenUpLeftReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openUpRightReturn">OpenUpRightReturn</button>
    </div>    
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Static Effects Out</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openDownLeftOut">OpenDownLeftOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openDownRightOut">OpenDownRightOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openUpLeftOut">OpenUpLeftOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="openUpRightOut">OpenUpRightOut</button>
    </div>    
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Perspective</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveDown">PerspectiveDown</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveUp">PerspectiveUp</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveLeft">PerspectiveLeft</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveRight">PerspectiveRight</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveDownReturn">PerspectiveDownReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveUpReturn">PerspectiveUpReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveLeftReturn">PerspectiveLeftReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="perspectiveRightReturn">PerspectiveRightReturn</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Rotate</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="rotateDown">RotateDown</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="rotateUp">RotateUp</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="rotateLeft">RotateLeft</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="rotateRight">RotateRight</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Slide</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideDown">SlideDown</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideUp">SlideUp</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideLeft">SlideLeft</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideRight">SlideRight</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideDownReturn">SlideDownReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideUpReturn">SlideUpReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideLeftReturn">SlideLeftReturn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="slideRightReturn">SlideRightReturn</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Math</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="swashOut">SwashOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="swashIn">SwashIn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="foolishIn">FoolishIn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="holeOut">HoleOut</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Tin</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinRightOut">TinRightOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinLeftOut">TinLeftOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinUpOut">TinUpOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinDownOut">TinDownOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinRightIn">TinRightIn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinLeftIn">TinLeftIn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinUpIn">TinUpIn</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="tinDownIn">TinDownIn</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Bomb</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="bombRightOut">BombRightOut</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="bombLeftOut">BombLeftOut</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">Boing</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="boingInUp">BoingInUp</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="boingOutDown">BoingOutDown</button>
    </div>
    <h5 class="my-3 text-base font-medium dark:text-slate-400">On The Space</h5>
    <div class="flex flex-wrap gap-2 justify-center">
        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceOutUp">SpaceOutUp</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceOutRight">SpaceOutRight</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceOutDown">SpaceOutDown</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceOutLeft">SpaceOutLeft</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceInUp">SpaceInUp</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceInRight">SpaceInRight</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceInDown">SpaceInDown</button>

        <button type="button" class="focus:outline-none focus:bg-opacity-50 focus:text-black hover:text-black  text-indigo-700 hover:bg-opacity-50 bg-gray-100 text-sm 
            font-medium py-1 border border-gray-100 dark:border-slate-700 px-2 rounded dark:bg-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            data-test="spaceInLeft">SpaceInLeft</button>
    </div>
</div>
@@include("partials/footer/footer.html")
@@include("partials/script-file.html")