frx/kurious
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

bootstrap migrate

Browse Source
This commit is contained in:
Aleksandr Trushkin
2024-03-02 19:34:33 +03:00
parent e5dfccabbf
commit af4a4f7840
9 changed files with 673 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
htmlexamples/index.html Normal file
View File

@ -0,0 +1,126 @@
<!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>