Skip to content

Instantly share code, notes, and snippets.

@rg3915

rg3915/img.png

Last active October 23, 2023 10:02
Show Gist options
  • Save rg3915/42c7a53788776fd107add4ca606af9ae to your computer and use it in GitHub Desktop.
Save rg3915/42c7a53788776fd107add4ca606af9ae to your computer and use it in GitHub Desktop.
Download ZIP
page TailwindCSS
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="shortcut icon" href="http://html5-training-in-hyderabad.blogspot.com.br/favicon.ico">
<link rel="shortcut icon" href="https://www.djangoproject.com/favicon.ico">
<link rel="shortcut icon" href="https://alpinejs.dev/favicon.png">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto px-4 py-10">
<div class="flex flex-col sm:flex-row space-x-10">
<div class="flex-shrink-0">
<ul class="text-white p-4 space-y-0.5">
<li class="bg-gray-400 p-3">Nossa Missão</li>
<li class="bg-orange-500 p-3">Valores e Crenças</li>
<li class="bg-orange-500 p-3">Quem somos</li>
</ul>
</div>
<div class="p-4">
<div class="text-4xl">Nossa Missão</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam provident necessitatibus sequi incidunt velit vel quia id eius perferendis nostrum quis, placeat architecto dolore sit ut praesentium neque soluta maxime?</p>
</div>
</div>
</div>
<div class="container mx-auto px-4">
<div class="grid sm:grid-cols-4 sm:grid-rows-2 gap-4">
<div class="bg-gray-200 sm:col-span-2">
<img
src="https://placehold.co/600x400"
alt=""
class="w-full h-full object-cover"
>
</div>
<div class="bg-gray-200 sm:col-span-2">
<img
src="https://placehold.co/600x400"
alt=""
class="w-full h-full object-cover"
>
</div>
<div class="bg-gray-200 h-80">
<img
src="https://loremflickr.com/640/360"
alt=""
class="w-full h-full object-cover"
>
</div>
<div class="bg-gray-200 h-80">
<img
src="https://placebear.com/640/360"
alt=""
class="w-full h-full object-cover"
>
</div>
<div class="bg-gray-200 h-80">
<img
src="https://placekitten.com/640/360"
alt=""
class="w-full h-full object-cover"
>
</div>
<div class="bg-gray-200 h-80">
<img
src="https://picsum.photos/640/360"
alt=""
class="w-full h-full object-cover"
>
</div>
</div>
</div>
<div class="container mx-auto text-center mb-10 text-3xl">Serviços</div>
<div class="container mx-auto px-4">
<div class="grid sm:grid-cols-2 gap-4">
<!-- Prospection -->
<div>
<div class="flex justify-center items-center">
<div class="flex justify-center items-center bg-gray-200 w-20 h-20 rounded-full">
<span class="text-orange-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
/>
</svg>
</span>
</div>
<div class="ml-4">
<h1 class="font-medium text-xl">Prospection</h1>
<p>Lorem, ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
<!-- Modeling -->
<div>
<div class="flex justify-center items-center">
<div class="flex justify-center items-center bg-gray-200 w-20 h-20 rounded-full">
<span class="text-orange-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
/>
</svg>
</span>
</div>
<div class="ml-4">
<h1 class="font-medium text-xl">Modeling</h1>
<p>Lorem, ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
<!-- Promotion -->
<div>
<div class="flex justify-center items-center">
<div class="flex justify-center items-center bg-gray-200 w-20 h-20 rounded-full">
<span class="text-orange-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/>
</svg>
</span>
</div>
<div class="ml-4">
<h1 class="font-medium text-xl">Promotion</h1>
<p>Lorem, ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
<!-- Synergies -->
<div>
<div class="flex justify-center items-center">
<div class="flex justify-center items-center bg-gray-200 w-20 h-20 rounded-full">
<span class="text-orange-500">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</span>
</div>
<div class="ml-4">
<h1 class="font-medium text-xl">Synergies</h1>
<p>Lorem, ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto text-center mb-10 text-3xl">Nossos Parceiros</div>
<div class="container">
<div class="flex justify-center px-4">
<div class="bg-gray-200 w-3/4 p-4">
<div class="container mx-auto text-center mb-10 text-3xl">Contato</div>
<div class="grid sm:grid-cols-2 gap-4">
<div>
<p>Nome</p>
<input
type="text"
class="w-full h-10 p-3 border border-gray-400 rounded-md"
>
</div>
<div>
<p>E-mail</p>
<input
type="email"
class="w-full h-10 p-3 border border-gray-400 rounded-md"
>
</div>
<div class="sm:col-span-2">
<p>Mensagem</p>
<textarea
class="w-full p-3 border border-gray-400 rounded-md"
rows="5"
></textarea>
</div>
</div>
<div class="text-center">
<button class="bg-orange-600 text-white p-2 px-10">Enviar Mensagem</button>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment