JSFiddle - React, Tailwind, and code Playground

by valiciousssx

HTML

<!DOCTYPE html>
<html>
<head>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <title>Suplimente</title>
    </head>
</head>
<body>

    <main>  
        <aside id="asReg">
            <p>Daca vrei sa ai parte de surprize, completeaza formularul din sectiunea Inregistreaza din bara de navigare.</p>
        </aside>
        <article id ="art1">
            <h3><b>Inregistrare</b></h3>
        
            <p id="register">Pentru a te inregistra pe site, apasa click stanga pe butonul <i>Inregistreaza</i> din bara de navigare.
                E nevoie sa introduci cateva date despre tine pentru a completa cu succes inregistrarea. Este important sa stii ca daca te inregistrezi pe site, vei avea
                acces la informatii despre noile studii despre suplimente nutritive, diferite evenimente private plus alte surprize.</p>
        </article>
       <br<br>
        <article id="art2">
            <aside id="asVid">
                <p>Stiai ca in fiecare an aducem cei mai buni sportivi din lume sa ne testeze produsele? Vezi sectiunea Videoclipuri.</p>
            </aside>  
            <h3><b>Videoclipuri</b></h3>
                <p id="videos">Asa cum am zis, brandul nostru s-a nascut din pasiune si iubire pentru sport iar de-a lungul timpului am luat parte la multe conferinte despre suplimente nutritive
                    si am participat la numeroase studii stiintifice cu scopul de a oferi clientilor cea mai buna calitate. Evenimentele care au avut loc in cadrul firmei le poti vedea in sectiunea
                    Videoclipuri din bara de navigare. Suplimentele de pe site sunt cele mai bune, click pe Videoclipuri ca sa vezi cateva filmutele despre
                    cum se fabrica suplimentele noastre.
                </p>
        </article>
        <br><br>
        <article id="art3">
            <aside id="asAbout">
                <p>Fun fact! Prima locatie de unde vindeam produsele noastre era un garaj in Braila.</p>
...

CSS

#asReg, #asVid, #asAbout {
    padding-top: 0.2%;
    width: 20%;
    float: right;
    box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;
    color: #29627e; 
    max-width: 140px;
}

#art1 {
    background-color: red;
}