Nous souhaitons créer un bloc de recherche en Html et Tailwind comme celui trouvé sur le site de waterside properties. Nous allons utiliser le prompt ScreenshotToCode pour créer la premiere version du bloc de recherche Html et Tailwind, puis nous allons nous aider de Perplexity IA pour améliorer la version jusqu’à obtenir un résultat approchant.
GPT-4 nous a permis d’nalyser la page complete, nous souhaitons l’utiliser maintenant pour le bloc recherche de la page.
Bibliographie
Nous remarquons que nous aurons besoin de pouvoir décrire les données statics de notre composant, et d’ajouter des GoogleFont dans le projet. Nous pouvons regarder :
- utiliser les template Elixir pour du XML
- pour ajouter des font dans le projet
- utilisation des composants, antipatern
- add fonts via
@fontsourcerepos. An example is at here 60. - configure tailwind for using these fonts. An example is at here 36.
- font source
ScreenshotToCode crée le bloc recherche en html et Tailwind
Le prompt ScreenshotToCode
Le code de screencode to code est en anglais.
You are an expert Tailwind developer You take screenshots of a reference web page from the user, and then build single page apps using Tailwind, HTML and JS. You might also be given a screenshot(The second image) of a web page that you have already built, and asked to update it to look more like the reference image(The first image). - Make sure the app looks exactly like the screenshot. - Pay close attention to background color, text color, font size, font family, padding, margin, border, etc. Match the colors and sizes exactly. - Use the exact text from the screenshot. - Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE. - Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen. - For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later. In terms of libraries, - Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script> - You can use Google Fonts - Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link> Return only the full code in <html></html> tags. Do not include markdown "```" or "```html" at the start or end.
Nous pourtrrions retravailler ce prompt pour personnaliser plus le prompt en fonction de la cible visée.
Utiliser ce prompt avec Perplexity, se déroule de la façon suivante :
- choisir le prompt dans la collection
- attacher l’image
- rédiger un texte dans la zone de thread.
Nous avons donner les instructions suivantes :
Peux tu créer le code de ce bloc de recherche, en respectant les dimensions exactes.
Résultat du prompt pour créer le bloc de recherche en Html et Tailwind
Depuis la page du site https://www.watersideproperties.com/, nous réalisons une capture de l’image avec SnagIt.
Nous lançons le prompt et obtenons une premiere version du code.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div class="flex flex-col items-center justify-center p-6 bg-white">
<div class="text-center">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 mx-auto py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line" class="mx-auto">
</div>
</div>
<div class="flex justify-center space-x-4 my-4">
<button class="px-6 py-2 border border-gray-300 text-gray-600 uppercase tracking-wide">For Sale</button>
<button class="px-6 py-2 border border-gray-300 text-gray-600 uppercase tracking-wide">To Rent</button>
</div>
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div class="flex items-center">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="flex-1 px-4 py-2 border border-gray-300">
<button class="px-6 py-2 bg-gray-800 text-white uppercase tracking-wide ml-4">Search</button>
</div>
</div>
</div>
</body>
</html>Avec CodePen, nous pouvons avoir un apperçu du resultat généré :
Améliorer le code du bloc recherche html et Tailwind
voilà une version intermediaire suite à un certin nombre de prompt :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="search-block" class="flex flex-col items-center justify-center p-6 bg-white border border-gray-200">
<div id="title-section" class="w-full max-w-2xl">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full bg-blue-50">
<div id="tabs-container" class="w-full bg-white">
<div class="flex justify-start">
<button class="tab border border-gray-300 text-gray-600 uppercase tracking-wide px-6 py-2" data-active="true">For Sale</button>
<button class="tab border border-gray-300 text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
</div>
</div>
<div id="search-container" class="p-6">
<div class="max-w-2xl mx-auto">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-end">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Nous avons affiné nos demandes pour obtenir le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="search-block" class="flex flex-col items-center justify-center p-6 bg-white border border-gray-200">
<div id="title-section" class="w-full max-w-2xl">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full bg-blue-50">
<div id="tabs-container" class="w-full bg-white">
<div class="flex justify-start">
<button class="tab border border-gray-300 text-gray-600 uppercase tracking-wide px-6 py-2 ml-6" data-active="true">For Sale</button>
<button class="tab border border-gray-300 text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
</div>
</div>
<div id="search-container" class="p-6">
<div class="max-w-2xl mx-auto">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-end">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Et le resultat visuel obtenu :
Améliorer le design avec des prompts précis
Les améliorations du rendus se font en indiquant à Perplexity à la fois de se référé à l’image initiale et en donnant une description de ce qui est attendu. Nous avons demandé l’ajout des traits jaunes sous le bouton For Sale afin d’indiquer que c’est la sélection active :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div id="search-block" class="flex flex-col items-center justify-center p-6 bg-white border border-gray-200">
<div id="title-section" class="w-full max-w-2xl mx-auto">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full bg-blue-50">
<div id="tabs-container" class="w-full bg-white">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400 " data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="p-6">
<div class="max-w-2xl mx-auto">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-end">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Visuel correspondant
nous avons une version stable nous la conservons ici :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="encadrement">
<div id="search-block" class="flex flex-col items-center justify-center p-6 bg-white border border-gray-200">
<div id="title-section" class="w-full max-w-2xl mx-auto">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full bg-blue-50">
<div id="tabs-container" class="w-full bg-white">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="p-6">
<div class="max-w-2xl mx-auto">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-start">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Mise en place du Responsiv Design
Avec l’image, nous avons présenté un rendu correspondant à la version Desktop. Nous allons continbuer à travailler avec Perplexity IA afin d’obtenir un code Responsive avec un point de rupture
Maintenant on veut qu’en mode desktop la taille soit de 489 par 663 pixel.
Nous partons de la version suivante :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center mt-4 ">
<div id="encadrement" class="max-w-[489px] max-h-[663px] border border-gray-200 bg-white ">
<div id="search-block" class="flex flex-col items-center justify-center p-6 bg-white border border-gray-200">
<div id="title-section" class="w-full max-w-2xl mx-auto">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full bg-blue-50">
<div id="tabs-container" class="w-full bg-white">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="p-6">
<div class="max-w-2xl mx-auto">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-start">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>on a un retour pour definir une taille en fonction du point de rupture desktop :
Les classes de hauteur conditionnelles basées sur les points d’arrêt (breakpoints) de Tailwind. Dans cet exemple, la classe md:h-[663px] est utilisée pour définir une hauteur de 663 pixels lorsque la fenêtre atteint la taille d’écran « md » (medium) définie par Tailwind CSS, qui est généralement considérée comme une taille d’écran de type desktop. La classe h-auto est utilisée pour les tailles d’écran plus petites afin que la hauteur s’adapte au contenu.
On a ajouté seulement la classe md:h-[663px] ;
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center mt-4 ">
<div id="encadrement" class="max-w-[489px] max-h-[663px] md:h-[663px] border border-gray-200 bg-white ">
<div id="search-block" class="flex flex-col items-center justify-center p-6 bg-white border border-gray-200">
<div id="title-section" class="w-full max-w-2xl mx-auto">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full bg-blue-50">
<div id="tabs-container" class="w-full bg-white">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="p-6">
<div class="max-w-2xl mx-auto">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-start">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>une version de travail qui tienne compte de la taille en mode desktop :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center ">
<div id="encadrement" class="max-w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-start">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Par affinement successif, nous avançons vers le design souhaité
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="max-w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6 border-b border-gray-200 ">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-start">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>version suivante :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between max-w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6 ">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-start">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>nouvelle version :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between max-w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<div id="input-button-container" class="flex flex-col items-start">
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>j’ai simplifié le code en supprimant le div input-search-container :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between max-w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Créer le responsiv-design du bloc recherche Html et Tailwind
Nous souhaitons pouvoior ppasser de la version desktop à la version mobile.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4 md:max-w-[489px]">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Forcer la zone tabs-and-search en bas du bloc de recherche Html et Tailwind
on veut que la zone tabs-and-search reste en bas :
Dans cet exemple, j’ai ajouté la classe mt-auto à la div tabs-and-search. Cette classe applique une marge automatique en haut de l’élément, ce qui a pour effet de pousser la div vers le bas de son conteneur parent encadrement. Cela garantit que tabs-and-search reste collée en bas en mode desktop.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between max-w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4 md:max-w-[489px]">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200 mt-auto">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Le code proposé ne règle pas le positionnemnt vers le bas de tabs-and-search et ressemble à la version précédente.
la version qui fonctionne avec la zone vers le bas et le passage du mode desktop au mode mobile :
Dans cet exemple, j’ai ajouté justify-between à la classe du div encadrement pour utiliser la flexbox et répartir l’espace verticalement entre les enfants, ce qui pousse la div tabs-and-search vers le bas de son conteneur encadrement. Cela garantit que tabs-and-search reste collée en bas en mode desktop.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Le bouton search soit à droite en mode desktop, et à gauche en mobile
La version qui fonctionne presque en mettant le bouton search à droite en mode desktop :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4 md:mb-0">
<div id="input-button-container" class="flex md:justify-end">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2 md:ml-4">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>J’ai ajouté md:p-‘ pour avoir le bouton search un peu en dessous de la zone input :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20">
<div class="w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4 md:mb-0">
<div id="input-button-container" class="flex md:justify-end md:p-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2 md:ml-4">Search</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Nous devons faire en sorte que les elements de search-container occupe tout l’espace disponible.
La version qui supprime le div en trop et remonte le w-full dans search-container :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20 w-full">
<label for="search" class="block text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="w-full px-4 py-2 border border-gray-300 mb-4 md:mb-0">
<div id="input-button-container" class="flex md:justify-end md:p-4">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2 md:ml-4">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>une autre version
le boutons search est dans un div flex
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20 w-full flex flex-col">
<label for="search" class="text-sm font-semibold text-gray-600 uppercase tracking-wide mb-2">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="px-4 py-2 border border-gray-300 mb-4">
<div class="flex md:justify-end">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>autre version :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20 w-full flex flex-col space-y-4 md:space-y-6">
<label for="search" class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="px-4 py-2 border border-gray-300">
<div class="flex md:justify-end">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Modifier le design du bloc tabs-and-search
Un ajustement avec du padding : cela ne change pas vraiment le design :
Dans ce code, j’ai ajouté un padding en haut pt-4 pour le premier div dans encadrement qui s’annule en mode desktop avec md:pt-0. J’ai également ajouté un padding en bas pb-4 pour le div qui contient le bouton « Search » qui s’annule également en mode desktop avec md:pb-0. Cela crée un espacement équitable entre les éléments en mode desktop tout en conservant un petit espacement entre le haut et le bas du div.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div class="pt-4 md:pt-0">
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:py-20 w-full flex flex-col space-y-4 md:space-y-6">
<label for="search" class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="px-4 py-2 border border-gray-300">
<div class="flex md:justify-end pb-2 md:pb-0">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>On essaye de remonter le label et descendre le bouton. C’est md:py-20 qui empeche d’ajuster les distances.
Si vous avez l’impression que le label « Where… » n’est pas positionné plus haut en mode desktop avec md:py-20, cela peut être dû au fait que cette classe augmente le padding en haut et en bas de manière égale, ce qui peut donner l’impression que le label reste centré verticalement dans son conteneur.Pour positionner le label plus haut dans le conteneur en mode desktop, vous pouvez réduire le padding en haut spécifiquement avec une classe comme md:pt-4 ou md:pt-2, qui appliquera un padding en haut plus petit en mode desktop. Voici un exemple de code mis à jour :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600">Looking for something special?</p>
<h1 class="text-2xl font-semibold my-2">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:pt-4 md:pb-20 w-full flex flex-col space-y-4 md:space-y-6">
<label for="search" class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="px-4 py-2 border border-gray-300">
<div class="flex md:justify-end">
<button class="bg-gray-800 text-white uppercase tracking-wide px-6 py-2">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Nous avons fait des ajustement de position de taille et d’entre-ligne :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloc de recherche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center">
<div id="encadrement" class="flex flex-col justify-between w-full md:w-[489px] h-auto md:h-[663px] border border-gray-200 bg-white mx-auto mt-4">
<div>
<div id="search-block" class="flex flex-col items-center justify-center mt-4 pl-6">
<div id="title-section" class="w-full">
<p class="text-sm uppercase tracking-wide text-gray-600 mb-6">Looking for something special?</p>
<h1 class="text-4xl font-semibold my-2 mb-8">Find your perfect home near the water with the Waterside Network...</h1>
<div class="w-16 py-2">
<img src="https://placehold.co/64x16" alt="Decorative squiggly line">
</div>
</div>
</div>
</div>
<div id="tabs-and-search" class="w-full border border-gray-200">
<div id="tabs-container" class="w-full">
<div class="flex items-center pl-6">
<div class="border-l border-gray-200 h-10"></div>
<button class="tab px-6 py-2 text-gray-600 uppercase tracking-wide border-b-4 border-yellow-400" data-active="true">For Sale</button>
<div class="border-l border-gray-200 h-10"></div>
<button class="tab text-gray-600 uppercase tracking-wide px-6 py-2">To Rent</button>
<div class="border-l border-gray-200 h-10"></div>
</div>
</div>
<div id="search-container" class="bg-blue-50 p-6 md:pt-6 md:pb-20 w-full flex flex-col space-y-4 md:space-y-10">
<label for="search" class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Where...</label>
<input id="search" type="text" placeholder="Anywhere Near The Water" class="px-8 py-4 border border-gray-300">
<div class="flex md:justify-end">
<button class="bg-gray-800 text-white uppercase tracking-wide px-8 py-4">Search</button>
</div>
</div>
</div>
</div>
</body>
</html>Version finalisée du bloc de recherche en Html et Tailwind
Résultat en image :
Et en version mobile :
Conclusion
Après de nombreux prompts, nous avons une version visuellement proche des 2 modes : Mobile et Desktop. Dans un prochain article nous allons transformer ce code en composant Elixir livecomponent.