La classe right de tailwind css

ameb2908 -
ameb2908 - 22 janv. 2025 à 10:29

Bonjour, j'ai un petit soucis de positionnement avec tailwind css.

J'ai un menu que je voudrais positionner à droite à partir de 1024px à 1535px

sauf que la classe right ne me le positionne pas.

Windows / Chrome 131.0.0.0

Afficher la suite

2 réponses

Réponse 1 / 2
bg62 Messages postés 23433 Date d'inscription Statut Modérateur Dernière intervention 2 435

mieux vaudrait 'coller' directement le code ici à l'aide des balises faites pour cela.... :)
0

ameb2908

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="fontawesome/css/all.min.css">
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="js/scripts.js" async></script>
    </head>

    <body class="2xl:hidden">
        <header class="bg-[lightseagreen]">
            <div class="h-[60px]
                        flex flex-col
                        items-center justify-around
                        md:max-2xl:flex-row md:max-2xl:justify-between
                        md:max-2xl:px-[20px]">
                <div class="flex items-center">
                    <i class="fa-solid fa-phone fa-sm text-black mr-[5px]"></i>
                    <span class="text-white">Appelez le : 06 39 39 72 50</span>
                </div>

                <div class="flex items-center">
                    <i class="fa-solid fa-envelope fa-sm text-black mr-[5px]"></i>
                    <span class="text-white">Courriel : ***@***</span>
                </div>
            </div>
        </header>

        <nav class="bg-black">
            <div class="h-[100px] flex justify-between items-center relative px-[20px]">
                <div class="w-[200px] h-[60px]">
                    <img class="w-[100%] h-[100%]" src="images/logo-arthur.jpg" alt="Entreprise Arthur">
                </div>

                <div class="lg:hidden">
                    <i class="fa-solid fa-bars fa-2xl text-[lightseagreen]" id="open"></i>
                    <i class="fa-solid fa-square-xmark fa-2xl hidden text-[lightseagreen]" id="close"></i>
                </div>

                <ul class="hidden w-[100%]
                           absolute top-[100px] left-[0px]
                         bg-black
                           lg:max-2xl:flex lg:max-2xl:w-[454px] lg:max-2xl:justify-between
                           lg:max-2xl:top-[30px] lg:max-2xl:right-[20px]" id="menu">
                    <li class="uppercase p-[10px] bg-[lightseagreen] text-white"><a href="#">accueil</a></li>
                    <li class="uppercase p-[10px] hover:bg-[lightseagreen] text-white"><a href="#service">services</a></li>
                    <li class="uppercase p-[10px] hover:bg-[lightseagreen] text-white"><a href="#">tarifs</a></li>
                    <li class="uppercase p-[10px] hover:bg-[lightseagreen] text-white"><a href="#">contact</a></li>
                </ul>
            </div>
        </nav>

La classe right de tailwind css

2 réponses

Discussions similaires

Newsletters