Showcase - Marssel Components and Examples

Maps & Media

Hover, shadows, rounded corners.

Components for displaying rich content.

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>

Buttons

All styles, one syntax.

<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

Statuses and labels in one class.

Active On hold Error Information

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>

Alerts

Clear feedback for the user.

Registration successful.

Check the information.

An error has occurred.

<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>

Forms

Clean inputs, careful focus.

Create an account

Free, without credit card.

<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>

Typography

Clear hierarchy, pleasant reading.

Main title

Section subtitle

Readable and airy body of text for optimal comfort.

DISCREET LABEL

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>

Build everything.
Faster.

Abstrait #402

Create an account

And this is just the beginning.

Build everything.Faster.

Abstrait #402

Create an account

And this is just the beginning.

Cookie settings

Build everything.
Faster.