Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <ol>
    <li class="demo-group">
        <p class="sticky demo-heading">A</p>
        <ul>
            <li class="demo-name">Athéna</li>
            <li class="demo-name">Angel</li>
            <li class="demo-name">Arthur</li>
            <li class="demo-name">Angie</li>
            <li class="demo-name">Attila</li>
            <li class="demo-name">Arya</li>
            <li class="demo-name">Aslan</li>
            <li class="demo-name">Abby</li>
            <li class="demo-name">Alaska</li>
            <li class="demo-name">Ange</li>
            <li class="demo-name">Alvin</li>
            <li class="demo-name">Agathe</li>
            <li class="demo-name">Aby</li>
            <li class="demo-name">Aya</li>
            <li class="demo-name">Ambre</li>
            <li class="demo-name">Atchoum</li>
            <li class="demo-name">Azur</li>
            <li class="demo-name">Aramis</li>
            <li class="demo-name">Alex</li>
            <li class="demo-name">Alice</li>
            <li class="demo-name">Akira</li>
            <li class="demo-name">Aria</li>
            <li class="demo-name">Amy</li>
            <li class="demo-name">Artémis</li>
            <li class="demo-name">Arès</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">B</p>
        <ul>
            <li class="demo-name">Bounty</li>
            <li class="demo-name">Bella</li>
            <li class="demo-name">Bambou</li>
            <li class="demo-name">Biscotte</li>
            <li class="demo-name">Berlioz</li>
            <li class="demo-name">Bébé</li>
            <li class="demo-name">Bianca</li>
            <li class="demo-name">Bibi</li>
            <li class="demo-name">Boulette</li>
            <li class="demo-name">Bandit</li>
            <li class="demo-name">Boubou</li>
            <li class="demo-name">Bagheera</li>
            <li class="demo-name">Babouche</li>
            <li class="demo-name">Belle</li>
            <li class="demo-name">Bouboule</li>
            <li class="demo-name">Blacky</li>
            <li class="demo-name">Billy</li>
            <li class="demo-name">Blue</li>
            <li class="demo-name">Bob</li>
            <li class="demo-name">Baloo</li>
            <li class="demo-name">Bulle</li>
            <li class="demo-name">Bijou</li>
            <li class="demo-name">Bidule</li>
            <li class="demo-name">Bouba</li>
            <li class="demo-name">Baghera</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">C</p>
        <ul>
            <li class="demo-name">Chipie</li>
            <li class="demo-name">Caramel</li>
            <li class="demo-name">Caline</li>
            <li class="demo-name">Chanel</li>
            <li class="demo-name">Cookie</li>
            <li class="demo-name">Clochette</li>
            <li class="demo-name">Choupette</li>
            <li class="demo-name">Canelle</li>
            <li class="demo-name">Chaussette</li>
            <li class="demo-name">Cachou</li>
            <li class="demo-name">Cannelle</li>
            <li class="demo-name">Charlie</li>
            <li class="demo-name">Capucine</li>
            <li class="demo-name">Canaille</li>
            <li class="demo-name">Charly</li>
            <li class="demo-name">Cléo</li>
            <li class="demo-name">Croquette</li>
            <li class="demo-name">Chouquette</li>
            <li class="demo-name">Coco</li>
            <li class="demo-name">Chouchou</li>
            <li class="demo-name">Charlotte</li>
            <li class="demo-name">Cerise</li>
            <li class="demo-name">Calin</li>
            <li class="demo-name">Chat </li>
            <li class="demo-name">Calypso</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">D</p>
        <ul>
            <li class="demo-name">Duchesse</li>
            <li class="demo-name">Doudou</li>
            <li class="demo-name">Domino</li>
            <li class="demo-name">Daisy</li>
            <li class="demo-name">Diabolo</li>
            <li class="demo-name">Diesel</li>
            <li class="demo-name">Diego</li>
            <li class="demo-name">Dora</li>
            <li class="demo-name">Dexter</li>
            <li class="demo-name">Diablo </li>
            <li class="demo-name">Diva</li>
            <li class="demo-name">Dior</li>
            <li class="demo-name">Dolly</li>
            <li class="demo-name">Dina</li>
            <li class="demo-name">Django</li>
            <li class="demo-name">Diamant</li>
            <li class="demo-name">Douchka</li>
            <li class="demo-name">Dixie</li>
            <li class="demo-name">Didou</li>
            <li class="demo-name">Dana</li>
            <li class="demo-name">Dolce</li>
            <li class="demo-name">Divine</li>
            <li class="demo-name">Darwin</li>
            <li class="demo-name">Douce</li>
            <li class="demo-name">Didi</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">E</p>
        <ul>
            <li class="demo-name">Eden</li>
            <li class="demo-name">Étoile</li>
            <li class="demo-name">Enzo</li>
            <li class="demo-name">Eclipse</li>
            <li class="demo-name">Elliot</li>
            <li class="demo-name">Eliot</li>
            <li class="demo-name">Elvis</li>
            <li class="demo-name">Éclair</li>
            <li class="demo-name">Eliott</li>
            <li class="demo-name">Eros</li>
            <li class="demo-name">Elsa</li>
            <li class="demo-name">Ebène</li>
            <li class="demo-name">Emeraude</li>
            <li class="demo-name">Emy</li>
            <li class="demo-name">Ella</li>
            <li class="demo-name">Elfy</li>
            <li class="demo-name">Easy</li>
            <li class="demo-name">Eva</li>
            <li class="demo-name">Elliott</li>
            <li class="demo-name">Ezio</li>
            <li class="demo-name">Eddy</li>
            <li class="demo-name">Epice</li>
            <li class="demo-name">Elfie</li>
            <li class="demo-name">Ellie</li>
            <li class="demo-name">Era</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">F</p>
        <ul>
            <li class="demo-name">Felix</li>
            <li class="demo-name">Filou</li>
            <li class="demo-name">Fripouille</li>
            <li class="demo-name">Flocon</li>
            <li class="demo-name">Frimousse</li>
            <li class="demo-name">Féline</li>
            <li class="demo-name">Ficelle</li>
            <li class="demo-name">Fifi</li>
            <li class="demo-name">Figaro</li>
            <li class="demo-name">Fidji</li>
            <li class="demo-name">Fripon</li>
            <li class="demo-name">Fifille</li>
            <li class="demo-name">Fiona</li>
            <li class="demo-name">Fleur</li>
            <li class="demo-name">Fanny</li>
            <li class="demo-name">Flash</li>
            <li class="demo-name">Flora</li>
            <li class="demo-name">Freya</li>
            <li class="demo-name">Framboise</li>
            <li class="demo-name">Fluffy</li>
            <li class="demo-name">Flamme</li>
            <li class="demo-name">Fanta</li>
            <li class="demo-name">Félicie</li>
            <li class="demo-name">Foxy</li>
            <li class="demo-name">Finette</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">G</p>
        <ul>
            <li class="demo-name">Gribouille</li>
            <li class="demo-name">Garfield</li>
            <li class="demo-name">Guizmo</li>
            <li class="demo-name">Grisou</li>
            <li class="demo-name">Grisette</li>
            <li class="demo-name">Gaia</li>
            <li class="demo-name">Gizmo</li>
            <li class="demo-name">Grisouille</li>
            <li class="demo-name">Gucci</li>
            <li class="demo-name">Guimauve</li>
            <li class="demo-name">Grizou</li>
            <li class="demo-name">Gaston</li>
            <li class="demo-name">Gaspard</li>
            <li class="demo-name">Gipsy</li>
            <li class="demo-name">Guismo</li>
            <li class="demo-name">Gaby</li>
            <li class="demo-name">Ginger</li>
            <li class="demo-name">Galipette</li>
            <li class="demo-name">Gaya</li>
            <li class="demo-name">Gamin</li>
            <li class="demo-name">Gus</li>
            <li class="demo-name">Griotte</li>
            <li class="demo-name">Gaufrette</li>
            <li class="demo-name">Gigi</li>
            <li class="demo-name">Grizouille</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">H</p>
        <ul>
            <li class="demo-name">Happy</li>
            <li class="demo-name">Haribo</li>
            <li class="demo-name">Hermes</li>
            <li class="demo-name">Helios</li>
            <li class="demo-name">Harry</li>
            <li class="demo-name">Hades</li>
            <li class="demo-name">Harley</li>
            <li class="demo-name">Hermione</li>
            <li class="demo-name">Héra</li>
            <li class="demo-name">Holly</li>
            <li class="demo-name">Hercule</li>
            <li class="demo-name">Horus</li>
            <li class="demo-name">Hope</li>
            <li class="demo-name">Hugo</li>
            <li class="demo-name">Hermine</li>
            <li class="demo-name">Hiro</li>
            <li class="demo-name">Hawai</li>
            <li class="demo-name">Homer</li>
            <li class="demo-name">Honey</li>
            <li class="demo-name">Hector</li>
            <li class="demo-name">Harmony</li>
            <li class="demo-name">Harmonie</li>
            <li class="demo-name">Heidi</li>
            <li class="demo-name">Hanoi</li>
            <li class="demo-name">Heaven</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">I</p>
        <ul>
            <li class="demo-name">Isis</li>
            <li class="demo-name">Iris</li>
            <li class="demo-name">Indy</li>
            <li class="demo-name">Igloo</li>
            <li class="demo-name">Izzy</li>
            <li class="demo-name">Iron</li>
            <li class="demo-name">Ivy</li>
            <li class="demo-name">Ice</li>
            <li class="demo-name">Igor</li>
            <li class="demo-name">Isidore</li>
            <li class="demo-name">Izy</li>
            <li class="demo-name">Inès</li>
            <li class="demo-name">Izia</li>
            <li class="demo-name">Iggy</li>
            <li class="demo-name">Indiana</li>
            <li class="demo-name">Ibiza</li>
            <li class="demo-name">Indi</li>
            <li class="demo-name">Inaya</li>
            <li class="demo-name">Isabelle</li>
            <li class="demo-name">Inox</li>
            <li class="demo-name">Itchy</li>
            <li class="demo-name">Inna</li>
            <li class="demo-name">Iago</li>
            <li class="demo-name">Ina</li>
            <li class="demo-name">Izi</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">J</p>
        <ul>
            <li class="demo-name">Jade</li>
            <li class="demo-name">Junior</li>
            <li class="demo-name">Jazz</li>
            <li class="demo-name">Jack</li>
            <li class="demo-name">Joy</li>
            <li class="demo-name">June</li>
            <li class="demo-name">Juliette</li>
            <li class="demo-name">Jasmine</li>
            <li class="demo-name">Jerry</li>
            <li class="demo-name">Jules</li>
            <li class="demo-name">Jazzy</li>
            <li class="demo-name">Java</li>
            <li class="demo-name">Jackson</li>
            <li class="demo-name">Juju</li>
            <li class="demo-name">Julie</li>
            <li class="demo-name">Jojo</li>
            <li class="demo-name">Jimmy</li>
            <li class="demo-name">Jessie</li>
            <li class="demo-name">Jupiter</li>
            <li class="demo-name">Jedi</li>
            <li class="demo-name">Josephine</li>
            <li class="demo-name">Jenny</li>
            <li class="demo-name">Jessy</li>
            <li class="demo-name">Julia</li>
            <li class="demo-name">Joey</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">K</p>
        <ul>
            <li class="demo-name">Kitty</li>
            <li class="demo-name">Kiwi</li>
            <li class="demo-name">Kiki</li>
            <li class="demo-name">Kiara</li>
            <li class="demo-name">Kira</li>
            <li class="demo-name">Kenzo</li>
            <li class="demo-name">Kali</li>
            <li class="demo-name">Kaya</li>
            <li class="demo-name">Kaline</li>
            <li class="demo-name">Koda</li>
            <li class="demo-name">Kinder</li>
            <li class="demo-name">Kimi</li>
            <li class="demo-name">Kaly</li>
            <li class="demo-name">Kyra</li>
            <li class="demo-name">Kheops</li>
            <li class="demo-name">Kiko</li>
            <li class="demo-name">Kirikou</li>
            <li class="demo-name">Kenza</li>
            <li class="demo-name">Kikou</li>
            <li class="demo-name">Kuro</li>
            <li class="demo-name">Kity</li>
            <li class="demo-name">Kara</li>
            <li class="demo-name">Kiss</li>
            <li class="demo-name">Kovu</li>
            <li class="demo-name">Kimy</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">L</p>
        <ul>
            <li class="demo-name">Luna</li>
            <li class="demo-name">Léo</li>
            <li class="demo-name">Lola</li>
            <li class="demo-name">Lilou</li>
            <li class="demo-name">Lili</li>
            <li class="demo-name">Lucky</li>
            <li class="demo-name">Loulou</li>
            <li class="demo-name">Louna</li>
            <li class="demo-name">Lily</li>
            <li class="demo-name">Leon</li>
            <li class="demo-name">Lulu</li>
            <li class="demo-name">Lea</li>
            <li class="demo-name">Lila</li>
            <li class="demo-name">Loki</li>
            <li class="demo-name">Lady</li>
            <li class="demo-name">Lilo</li>
            <li class="demo-name">Lilas</li>
            <li class="demo-name">Looping</li>
            <li class="demo-name">Lou</li>
            <li class="demo-name">Lilly</li>
            <li class="demo-name">Lana</li>
            <li class="demo-name">Lune</li>
            <li class="demo-name">Litchi</li>
            <li class="demo-name">Lolita</li>
            <li class="demo-name">Luciole</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">M</p>
        <ul>
            <li class="demo-name">Minette</li>
            <li class="demo-name">Mimi</li>
            <li class="demo-name">Maya</li>
            <li class="demo-name">Minou</li>
            <li class="demo-name">Mimine</li>
            <li class="demo-name">Minouche</li>
            <li class="demo-name">Moustache</li>
            <li class="demo-name">Mia</li>
            <li class="demo-name">Mina</li>
            <li class="demo-name">Misty</li>
            <li class="demo-name">Marley</li>
            <li class="demo-name">Myrtille</li>
            <li class="demo-name">Mickey</li>
            <li class="demo-name">Max</li>
            <li class="demo-name">Moumoune</li>
            <li class="demo-name">Moustique</li>
            <li class="demo-name">Merlin</li>
            <li class="demo-name">Moka</li>
            <li class="demo-name">Mistigri</li>
            <li class="demo-name">Moon</li>
            <li class="demo-name">Minnie</li>
            <li class="demo-name">Milka</li>
            <li class="demo-name">Milo</li>
            <li class="demo-name">Maxou</li>
            <li class="demo-name">Mistigris</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">N</p>
        <ul>
            <li class="demo-name">Nala</li>
            <li class="demo-name">Noisette</li>
            <li class="demo-name">Nina</li>
            <li class="demo-name">Nougat</li>
            <li class="demo-name">Neige</li>
            <li class="demo-name">Nenette</li>
            <li class="demo-name">Néo</li>
            <li class="demo-name">Neko</li>
            <li class="demo-name">Naya</li>
            <li class="demo-name">Nemo</li>
            <li class="demo-name">Nuage</li>
            <li class="demo-name">Nougatine</li>
            <li class="demo-name">Nikita</li>
            <li class="demo-name">Ninou</li>
            <li class="demo-name">Nino</li>
            <li class="demo-name">Nana</li>
            <li class="demo-name">Noé</li>
            <li class="demo-name">Nini</li>
            <li class="demo-name">Nounours</li>
            <li class="demo-name">Nelson</li>
            <li class="demo-name">Nova</li>
            <li class="demo-name">Napoleon</li>
            <li class="demo-name">Newton</li>
            <li class="demo-name">Nounou</li>
            <li class="demo-name">Ninja</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">O</p>
        <ul>
            <li class="demo-name">Oreo</li>
            <li class="demo-name">Oscar</li>
            <li class="demo-name">Oliver</li>
            <li class="demo-name">Olaf</li>
            <li class="demo-name">Oggy</li>
            <li class="demo-name">Osiris</li>
            <li class="demo-name">Olympe</li>
            <li class="demo-name">Onyx</li>
            <li class="demo-name">Orion</li>
            <li class="demo-name">Opium</li>
            <li class="demo-name">Opale</li>
            <li class="demo-name">Orphée</li>
            <li class="demo-name">Oasis</li>
            <li class="demo-name">Oslo</li>
            <li class="demo-name">O'malley</li>
            <li class="demo-name">Oceane</li>
            <li class="demo-name">Olly</li>
            <li class="demo-name">Odin</li>
            <li class="demo-name">Olive</li>
            <li class="demo-name">Oups</li>
            <li class="demo-name">Ophélie</li>
            <li class="demo-name">Opaline</li>
            <li class="demo-name">Ohana</li>
            <li class="demo-name">O'maley</li>
            <li class="demo-name">Ouistiti</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">P</p>
        <ul>
            <li class="demo-name">Princesse</li>
            <li class="demo-name">Plume</li>
            <li class="demo-name">Praline</li>
            <li class="demo-name">Perle</li>
            <li class="demo-name">Pistache</li>
            <li class="demo-name">Pacha</li>
            <li class="demo-name">Pépette</li>
            <li class="demo-name">Pupuce</li>
            <li class="demo-name">Prince</li>
            <li class="demo-name">Pepito</li>
            <li class="demo-name">Pilou</li>
            <li class="demo-name">Poupette</li>
            <li class="demo-name">Pompon</li>
            <li class="demo-name">Pixel</li>
            <li class="demo-name">Pepsi</li>
            <li class="demo-name">Peluche</li>
            <li class="demo-name">Pepite</li>
            <li class="demo-name">Prunelle</li>
            <li class="demo-name">Ponpon</li>
            <li class="demo-name">Pirouette</li>
            <li class="demo-name">Pirate</li>
            <li class="demo-name">Pimousse</li>
            <li class="demo-name">Pompom</li>
            <li class="demo-name">Pitchoune</li>
            <li class="demo-name">Prune</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">Q</p>
        <ul>
            <li class="demo-name">Queen</li>
            <li class="demo-name">Queeny</li>
            <li class="demo-name">Quincy</li>
            <li class="demo-name">Qwerty</li>
            <li class="demo-name">Quicky</li>
            <li class="demo-name">Quizz</li>
            <li class="demo-name">Quick</li>
            <li class="demo-name">Quenouille</li>
            <li class="demo-name">Quéchua</li>
            <li class="demo-name">Quinn</li>
            <li class="demo-name">Quenelle</li>
            <li class="demo-name">Quinoa </li>
            <li class="demo-name">Quenotte</li>
            <li class="demo-name">Qechua</li>
            <li class="demo-name">Quicouillou</li>
            <li class="demo-name">Quirli</li>
            <li class="demo-name">Queency</li>
            <li class="demo-name">Quinzou</li>
            <li class="demo-name">Quecha</li>
            <li class="demo-name">Quica</li>
            <li class="demo-name">Quinoa Dit Kinkin</li>
            <li class="demo-name">Quake</li>
            <li class="demo-name">Quinette</li>
            <li class="demo-name">Quack</li>
            <li class="demo-name">Quenna</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">R</p>
        <ul>
            <li class="demo-name">Reglisse</li>
            <li class="demo-name">Romeo</li>
            <li class="demo-name">Ruby</li>
            <li class="demo-name">Rouky</li>
            <li class="demo-name">Ramsès</li>
            <li class="demo-name">Roxy</li>
            <li class="demo-name">Rocky </li>
            <li class="demo-name">Roucky</li>
            <li class="demo-name">Rose</li>
            <li class="demo-name">Rubis</li>
            <li class="demo-name">Rosie</li>
            <li class="demo-name">Rio</li>
            <li class="demo-name">Ronron</li>
            <li class="demo-name">Romy</li>
            <li class="demo-name">Roudoudou</li>
            <li class="demo-name">Ratatouille</li>
            <li class="demo-name">Rebelle</li>
            <li class="demo-name">Rouki</li>
            <li class="demo-name">Rita</li>
            <li class="demo-name">Rosa</li>
            <li class="demo-name">Rasta</li>
            <li class="demo-name">Réglise</li>
            <li class="demo-name">Raoul</li>
            <li class="demo-name">Rosalie</li>
            <li class="demo-name">Rosy</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">S</p>
        <ul>
            <li class="demo-name">Simba</li>
            <li class="demo-name">Sushi</li>
            <li class="demo-name">Salem</li>
            <li class="demo-name">Sacha</li>
            <li class="demo-name">Shadow</li>
            <li class="demo-name">Snow</li>
            <li class="demo-name">Saphir</li>
            <li class="demo-name">Sweety</li>
            <li class="demo-name">Sam</li>
            <li class="demo-name">Snoopy</li>
            <li class="demo-name">Shiva</li>
            <li class="demo-name">Stitch</li>
            <li class="demo-name">Sissi</li>
            <li class="demo-name">Sky</li>
            <li class="demo-name">Speedy</li>
            <li class="demo-name">Symba</li>
            <li class="demo-name">Stella</li>
            <li class="demo-name">Sally</li>
            <li class="demo-name">Sasha</li>
            <li class="demo-name">Sakura</li>
            <li class="demo-name">Sangha</li>
            <li class="demo-name">Silver</li>
            <li class="demo-name">Shana</li>
            <li class="demo-name">Spirou </li>
            <li class="demo-name">Samy</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">T</p>
        <ul>
            <li class="demo-name">Tigrou</li>
            <li class="demo-name">Titi</li>
            <li class="demo-name">Titou</li>
            <li class="demo-name">Tom</li>
            <li class="demo-name">Tigresse</li>
            <li class="demo-name">Tina</li>
            <li class="demo-name">Tequila</li>
            <li class="demo-name">Théo</li>
            <li class="demo-name">Tao</li>
            <li class="demo-name">Tomy</li>
            <li class="demo-name">Tara</li>
            <li class="demo-name">Tommy</li>
            <li class="demo-name">Tigrette</li>
            <li class="demo-name">Toulouse</li>
            <li class="demo-name">Titus</li>
            <li class="demo-name">Titeuf</li>
            <li class="demo-name">Tiger</li>
            <li class="demo-name">Topaze</li>
            <li class="demo-name">Tsuki</li>
            <li class="demo-name">Taz</li>
            <li class="demo-name">Tagada</li>
            <li class="demo-name">Tigris</li>
            <li class="demo-name">Tarzan</li>
            <li class="demo-name">Tchoupi</li>
            <li class="demo-name">Twix</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">U</p>
        <ul>
            <li class="demo-name">Ulysse</li>
            <li class="demo-name">Ugo</li>
            <li class="demo-name">Una</li>
            <li class="demo-name">Ursula</li>
            <li class="demo-name">Utopia</li>
            <li class="demo-name">Utopie</li>
            <li class="demo-name">Ugur</li>
            <li class="demo-name">Urielle</li>
            <li class="demo-name">Uma</li>
            <li class="demo-name">Unique</li>
            <li class="demo-name">Ushuaia</li>
            <li class="demo-name">Urban</li>
            <li class="demo-name">Ubick</li>
            <li class="demo-name">Uranus</li>
            <li class="demo-name">Upsa</li>
            <li class="demo-name">Ulka</li>
            <li class="demo-name">Ulysses</li>
            <li class="demo-name">Uriel</li>
            <li class="demo-name">Ulyss</li>
            <li class="demo-name">Ulina</li>
            <li class="demo-name">Ula</li>
            <li class="demo-name">Uranie</li>
            <li class="demo-name">Urkhan</li>
            <li class="demo-name">Utha</li>
            <li class="demo-name">Uan</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">V</p>
        <ul>
            <li class="demo-name">Vanille</li>
            <li class="demo-name">Venus</li>
            <li class="demo-name">Voyou</li>
            <li class="demo-name">Vodka</li>
            <li class="demo-name">Virgule</li>
            <li class="demo-name">Violette</li>
            <li class="demo-name">Victor</li>
            <li class="demo-name">Virus</li>
            <li class="demo-name">Vagabond</li>
            <li class="demo-name">Végas</li>
            <li class="demo-name">Vicky</li>
            <li class="demo-name">Valentin</li>
            <li class="demo-name">Valentine</li>
            <li class="demo-name">Velours</li>
            <li class="demo-name">Velour</li>
            <li class="demo-name">Vador</li>
            <li class="demo-name">Vanina</li>
            <li class="demo-name">Velcro</li>
            <li class="demo-name">Volcan</li>
            <li class="demo-name">Vera</li>
            <li class="demo-name">Vickie</li>
            <li class="demo-name">Victoire</li>
            <li class="demo-name">Volt</li>
            <li class="demo-name">Vito</li>
            <li class="demo-name">Vitamine</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">W</p>
        <ul>
            <li class="demo-name">Winnie</li>
            <li class="demo-name">Whisky</li>
            <li class="demo-name">Willow</li>
            <li class="demo-name">Woody</li>
            <li class="demo-name">Wendy</li>
            <li class="demo-name">Willy</li>
            <li class="demo-name">Wifi</li>
            <li class="demo-name">Wisky</li>
            <li class="demo-name">Winny</li>
            <li class="demo-name">Wall-E</li>
            <li class="demo-name">Weasley</li>
            <li class="demo-name">Wilson</li>
            <li class="demo-name">White</li>
            <li class="demo-name">Winni</li>
            <li class="demo-name">Wally</li>
            <li class="demo-name">Watson</li>
            <li class="demo-name">Wallace</li>
            <li class="demo-name">Waka</li>
            <li class="demo-name">Wicket</li>
            <li class="demo-name">Wallis</li>
            <li class="demo-name">Wolverine</li>
            <li class="demo-name">Wati</li>
            <li class="demo-name">Wiwi</li>
            <li class="demo-name">Walter</li>
            <li class="demo-name">William</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">X</p>
        <ul>
            <li class="demo-name">Xéna</li>
            <li class="demo-name">Xenon</li>
            <li class="demo-name">Xera</li>
            <li class="demo-name">Xana</li>
            <li class="demo-name">X-Men</li>
            <li class="demo-name">Xiaohong</li>
            <li class="demo-name">Xenna</li>
            <li class="demo-name">Xcvb</li>
            <li class="demo-name">Xxxtencatcion</li>
            <li class="demo-name">Xanax</li>
            <li class="demo-name">Xuri</li>
            <li class="demo-name">X-Trême Carbon 14</li>
            <li class="demo-name">Xin</li>
            <li class="demo-name">Xennedu'S Gabriella</li>
            <li class="demo-name">Xyn</li>
            <li class="demo-name">Xaoyu</li>
            <li class="demo-name">Xuria</li>
            <li class="demo-name">Xamourai</li>
            <li class="demo-name">Xixi</li>
            <li class="demo-name">Xerys</li>
            <li class="demo-name">Xeno</li>
            <li class="demo-name">Xena Et Shoubaca</li>
            <li class="demo-name">Xavier</li>
            <li class="demo-name">Xxx</li>
            <li class="demo-name">Xun</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">Y</p>
        <ul>
            <li class="demo-name">Yoda</li>
            <li class="demo-name">Yuki</li>
            <li class="demo-name">Yoshi</li>
            <li class="demo-name">Yuna</li>
            <li class="demo-name">Yumi</li>
            <li class="demo-name">Yoko</li>
            <li class="demo-name">Yoyo</li>
            <li class="demo-name">Youki</li>
            <li class="demo-name">Youyou</li>
            <li class="demo-name">Yona</li>
            <li class="demo-name">Yumé</li>
            <li class="demo-name">Yuri</li>
            <li class="demo-name">Yéti</li>
            <li class="demo-name">Yang</li>
            <li class="demo-name">Yuko</li>
            <li class="demo-name">Yasmine</li>
            <li class="demo-name">Yris</li>
            <li class="demo-name">Youpi</li>
            <li class="demo-name">Youna</li>
            <li class="demo-name">Youmi</li>
            <li class="demo-name">Yue</li>
            <li class="demo-name">Yuzu</li>
            <li class="demo-name">Yochi</li>
            <li class="demo-name">Youkie</li>
            <li class="demo-name">Ysatis</li>
        </ul>
    </li>
    <li class="demo-group">
        <p class="sticky demo-heading">Z</p>
        <ul>
            <li class="demo-name">Zoé</li>
            <li class="demo-name">Zelda</li>
            <li class="demo-name">Zorro</li>
            <li class="demo-name">Zazou</li>
            <li class="demo-name">Zouzou</li>
            <li class="demo-name">Zizou</li>
            <li class="demo-name">Zora</li>
            <li class="demo-name">Zebulon</li>
            <li class="demo-name">Zara</li>
            <li class="demo-name">Ziggy</li>
            <li class="demo-name">Zeus</li>
            <li class="demo-name">Zia</li>
            <li class="demo-name">Zephyr</li>
            <li class="demo-name">Zouina</li>
            <li class="demo-name">Zaza</li>
            <li class="demo-name">Zlatan</li>
            <li class="demo-name">Zola</li>
            <li class="demo-name">Ziva</li>
            <li class="demo-name">Zumba</li>
            <li class="demo-name">Zezette</li>
            <li class="demo-name">Zephir</li>
            <li class="demo-name">Zen</li>
            <li class="demo-name">Zoro</li>
            <li class="demo-name">Zadig</li>
            <li class="demo-name">Zazie</li>
        </ul>
    </li>
</ol>
              
            
!

CSS

              
                .sticky {
    position: sticky;
    top: 0.5rem;
}

/* Code nécessaire pour le look de la démo */
ol, ul, p {
    padding: 0;
    margin: 0;
}
.demo-heading {
    background-color: #e4e4e7;
    border-radius: 100%;
    width: 1rem;
    height: 1rem;
    padding: .5rem;
    text-align: center;
}
.demo-name {
    border-bottom: 1px solid #e4e4e7;
    padding: .5rem 0;
    list-style: none;
}
.demo-group {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 0.5rem;
    margin: 0.5rem;
}
              
            
!

JS

              
                
              
            
!
999px

Console