Showcase - Marssel Components and Examples

Cartes & Media

Hover, ombres, coins arrondis.

Composants pour afficher du contenu riche.

2h 45m

Abstrait #402

@marssel_art

0.85 ETH

<div class="bg-[white] p-[1rem] rounded-[20px]
     shadow-[0_20px_50px_-10px_rgba(0,0,0,0.12)]
     transform-[translateY(-4px)]:hover
     transition-[all_0.3s]">

    <div class="h-[160px] rounded-[14px]
         bg-[theme-mirage] mb-[1rem]
         position-[relative] overflow-[hidden]">
        <div class="position-[absolute] inset-[0]
             opacity-[0.6] bg-linear-[135deg,
             _theme-peach,_8b5cf6]">
        </div>
    </div>

    <h3 class="fs-[16px] fw-[700] mb-[0.4rem]">
        Abstrait #402
    </h3>
    <span class="fs-[13px] fw-[700] c-[red]">
        0.85 ETH
    </span>
    <button class="w-[100%] py-[0.55rem] rounded-[10px]
         border-[1px_solid_e2e8f0] bg-[f1f5f9]:hover
         fw-[600] fs-[13px]">
        Placer une enchère
    </button>
</div>

Boutons

Tous les styles, une syntaxe.

<button class="bg-[theme-peach] py-[0.75rem] rounded-[12px] fw-[600] fs-[15px] border-[none] w-[100%]">Primary</button>

<button class="bg-[transparent] c-[white] py-[0.75rem] rounded-[12px] fw-[600] fs-[15px] border-[2px_solid_334155] w-[100%]">Secondary</button>

<button class="bg-[17843F] c-[white] py-[0.75rem] rounded-[12px] fw-[600] fs-[15px] border-[none]">Success</button>

<button class="bg-[D41212] c_[white] py_[0.75rem] rounded_[12px] fw_[600] fs_[15px] border_[none]">Danger</button>

Badges & Tags

Statuts et étiquettes en une classe.

Actif En attente Erreur Info

CSS JavaScript Marssel

<span class="px-[12px] py-[5px] rounded-[50px] fs-[13px] fw-[700] bg-[dcfce7] c-[166534]">Actif</span>
<span class="px-[12px] py-[5px] rounded-[50px] fs-[13px] fw-[700] bg-[fef9c3] c-[854d0e]">En attente</span>
<span class="px-[12px] py-[5px] rounded-[50px] fs-[13px] fw-[700] bg-[fee2e2] c-[991b1b]">Erreur</span>


<span class="px-[12px] py-[5px] rounded-[8px] fs-[13px] fw-[500] bg-[white] c-[475569] border-[1px_solid_e2e8f0]">CSS</span>
<span class="px-[12px] py-[5px] rounded-[8px] fs-[13px] fw-[600] bg-[white] border-[1px_solid_fed7aa]">Marssel</span>

Alertes

Feedback clair pour l'utilisateur.

Enregistrement réussi.

Vérifiez les informations.

Une erreur est survenue.

<div class="d-[flex] align-items-[center] gap-[12px] p-[14px] rounded-[14px] bg-[dcfce7] border-[1px_solid_bbf7d0]">
    <span class="icon-[check-circle] w-[18px] h-[18px] c-[166534]"></span>
    <span class="fs-[14px] fw-[500] c-[166534]">Enregistrement réussi.</span>
</div>


<div class="d-[flex] align-items-[center] gap-[12px] p-[14px] rounded-[14px] bg-[fef9c3] border-[1px_solid_fde68a]">
    <span class="icon-[warning] w-[18px] h-[18px] c-[854d0e]"></span>
    <span class="fs-[14px] fw-[500] c-[854d0e]">Vérifiez les informations.</span>
</div>


<div class="d-[flex] align-items-[center] gap-[12px] p-[14px] rounded-[14px] bg-[fee2e2] border-[1px_solid_fecaca]">
    <span class="icon-[x-circle] w-[18px] h-[18px] c-[991b1b]"></span>
    <span class="fs-[14px] fw-[500] c-[991b1b]">Une erreur est survenue.</span>
</div>

Formulaires

Inputs propres, focus soigné.

Créer un compte

Gratuit, sans carte bancaire.

<div class="bg-[f8fafc] p-[2rem] rounded-[20px] border-[1px_solid_e2e8f0]">
    <h3 class="fs-[17px] fw-[700] mb-[0.4rem]">Créer un compte</h3>
    <p class="c-[5C6F8A] fs-[13px] mb-[1.5rem]">Gratuit, sans carte bancaire.</p>
    <input type="text" placeholder="Votre nom"
        class="w-[100%] px-[1rem] py-[0.7rem] rounded-[12px] border-[2px_solid_e2e8f0] mb-[8px] fs-[14px]" />
    <input type="email" placeholder="email@example.com"
        class="w-[100%] px-[1rem] py-[0.7rem] rounded-[12px] border-[2px_solid_e2e8f0] mb-[16px] fs-[14px]" />
    <button class="bg-[0f172a] c-[white] py-[0.75rem] rounded-[12px] fw-[600] fs-[14px] border-[none] w-[100%]">
        S'inscrire gratuitement
    </button>
</div>

Typographie

Hiérarchie claire, lecture agréable.

Titre principal

Sous-titre de section

Corps de texte lisible et aéré pour un confort optimal.

LABEL DISCRET

Bold Italic Underline code

<p class="fs-[38px] fw-[800] c-[0f172a] line-height-[1.1]">Titre principal</p>
<p class="fs-[22px] fw-[600] c-[334155]">Sous-titre de section</p>
<p class="fs-[15px] c-[5F6C80] line-height-[1.7]">Corps de texte...</p>
<p class="fs-[11px] fw-[700] text-transform-[uppercase] letter-spacing-[1.5px]">
    LABEL DISCRET
</p>

<span class="fw-[700]">Bold</span>
<span class="font-style-[italic]">Italic</span>
<span class="text-decoration-[underline]">Underline</span>
<code class="bg-[f1f5f9] c-[e11d48] px-[8px] py-[3px] rounded-[6px]">code</code>

<p class="fs-[38px] fw-[800] c-[0f172a] line-height-[1.1]">
    Titre principal
</p>
<p class="fs-[22px] fw-[600] c-[334155]">
    Sous-titre de section
</p>
<p class="fs-[15px] c-[5F6C80] line-height-[1.7]">
    Corps de texte...
</p>
<p class="fs-[11px] fw-[700]
   text-transform-[uppercase] letter-spacing-[1.5px]">
    LABEL DISCRET
</p>

<span class="fw-[700]">Bold</span>
<span class="font-style-[italic]">Italic</span>
<span class="text-decoration-[underline]">Underline</span>
<code class="bg-[f1f5f9] c-[e11d48] px-[8px] py-[3px] rounded-[6px]">
    code
</code>

Construisez tout.
Plus vite.

Abstrait #402

Créer un compte

Et ce n'est que le début.

Construisez tout.Plus vite.

Abstrait #402

Créer un compte

Et ce n'est que le début.

Réglages des cookies

Construisez tout.
Plus vite.