127 lines
6.2 KiB
HTML
127 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<title></title>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
clifford: '#da373d',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="text-3xl font-bold underline text-clifford">
|
||
Привет мир!
|
||
</h1>
|
||
|
||
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
|
||
<div class="shrink-0">
|
||
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
|
||
</div>
|
||
<div>
|
||
<div class="text-xl font-medium text-black">ChitChat</div>
|
||
<p class="text-slate-500">У вас новое сообщение!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
|
||
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Женское лицо" />
|
||
<div class="text-center space-y-2 sm:text-left">
|
||
<div class="space-y-0.5">
|
||
<p class="text-lg text-black font-semibold">
|
||
Эрин Линдфорд
|
||
</p>
|
||
<p class="text-slate-500 font-medium">
|
||
Инженер по продукту
|
||
</p>
|
||
</div>
|
||
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Сообщение</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="bg-sky-500 hover:bg-sky-700 px-4 py-1 rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
|
||
Сохранить изменения
|
||
</button>
|
||
|
||
<button class="dark:md:hover:bg-fuchsia-600 px-4 py-1 rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
|
||
Сохранить изменения
|
||
</button>
|
||
|
||
<ul role="list" class="p-6 divide-y divide-slate-200">
|
||
<li class="flex py-4 first:pt-0 last:pb-0">
|
||
<img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
|
||
<div class="ml-3 overflow-hidden">
|
||
<p class="text-sm font-medium text-slate-900">{person.name}</p>
|
||
<p class="text-sm text-slate-500 truncate">{person.email}</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="py-8 px-8 max-w-sm max-auto">
|
||
<form>
|
||
<label class="block">
|
||
<span class="block text-sm font-medium text-slate-700">Имя пользователя</span>
|
||
<!-- Using form state modifiers, the classes can be identical for every input -->
|
||
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
|
||
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
|
||
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
|
||
invalid:border-pink-500 invalid:text-pink-600
|
||
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
||
/>
|
||
<span class="block text-sm font-medium text-slate-700">Password</span>
|
||
<!-- Using form state modifiers, the classes can be identical for every input -->
|
||
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
|
||
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
|
||
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
|
||
invalid:border-pink-500 invalid:text-pink-600
|
||
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
||
/>
|
||
</label>
|
||
<!-- ... -->
|
||
</form>
|
||
</div>
|
||
|
||
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
|
||
<div class="flex items-center space-x-3">
|
||
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
|
||
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">Новый проект</h3>
|
||
</div>
|
||
<p class="text-slate-500 group-hover:text-white text-sm">Создайте новый проект из множества начальных шаблонов.</p>
|
||
</a>
|
||
|
||
<div class="container mx-auto px-4">
|
||
<div class="columns-3 gap-8">
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|