tofoo/templates/index.html
2024-05-17 07:52:15 +09:00

945 lines
42 KiB
HTML
Executable file

{% extends 'layout.html' %} {% block content %}
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
type="text/css"
/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
</style>
<!-- hero section -->
<div
class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
<section class="bg-white dark:bg-gray-900">
<div
class="items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-4 lg:gap-16 xl:gap-24 lg:py-16 lg:px-6"
>
<div class="col-span-2 mb-8">
<p class="text-lg font-medium text-primary-600 dark:text-primary-500">
AI-Powered Vtuber Hub
</p>
<h2
class="mt-3 mb-4 text-3xl font-extrabold tracking-tight text-gray-900 md:text-4xl dark:text-white"
>
What Vtubers can I watch?
</h2>
<p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">
We bring Vtubers directly to viewers and offer stream analysis to
creators. Our website is all about Vtuber content, and nothing else.
</p>
<div
class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700"
>
<div>
<a
href="#"
class="inline-flex items-center text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Log in
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div>
<a
href="#"
class="inline-flex items-center text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Submit your character
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
<div
class="col-span-2 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0"
>
<div>
<svg
class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z"
clip-rule="evenodd"
></path>
</svg>
<h3
class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
>
723 channels
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
and content in 12 languages from various streaming platforms
</p>
</div>
<div>
<svg
class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
></path>
</svg>
<h3
class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
>
1000+ users
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
trusted by over 1000 users around the world
</p>
</div>
<div>
<svg
class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M14.516 6.743c-.41-.368-.443-1-.077-1.41a.99.99 0 0 1 1.405-.078l5.487 4.948.007.006A2.047 2.047 0 0 1 22 11.721a2.06 2.06 0 0 1-.662 1.51l-5.584 5.09a.99.99 0 0 1-1.404-.07 1.003 1.003 0 0 1 .068-1.412l5.578-5.082a.05.05 0 0 0 .015-.036.051.051 0 0 0-.015-.036l-5.48-4.942Zm-6.543 9.199v-.42a4.168 4.168 0 0 0-2.715 2.415c-.154.382-.44.695-.806.88a1.683 1.683 0 0 1-2.167-.571 1.705 1.705 0 0 1-.279-1.092V15.88c0-3.77 2.526-7.039 5.967-7.573V7.57a1.957 1.957 0 0 1 .993-1.838 1.931 1.931 0 0 1 2.153.184l5.08 4.248a.646.646 0 0 1 .012.011l.011.01a2.098 2.098 0 0 1 .703 1.57 2.108 2.108 0 0 1-.726 1.59l-5.08 4.25a1.933 1.933 0 0 1-2.929-.614 1.957 1.957 0 0 1-.217-1.04Z"
clip-rule="evenodd"
/>
</svg>
<h3
class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
>
98.50% of traffic
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
visits official VTuber channels from our website
</p>
</div>
<div>
<svg
class="mb-2 w-8 h-8 md:w-10 md:h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
></path>
</svg>
<h3
class="mb-2 text-lg md:text-2xl tracking-tight font-bold dark:text-white"
>
3.6K alarms
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
per day for upcoming streams, unarchived streams and missed streams
</p>
</div>
</div>
</div>
</section>
</div>
<!-- table -->
<div
class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
<section class="bg-gray-50 dark:bg-gray-900 py-3 sm:py-5">
<div class="px-4 mx-auto max-w-screen-2xl lg:px-12">
<div
class="relative overflow-hidden bg-white shadow-md dark:bg-gray-800 sm:rounded-lg"
>
<div class="px-4 divide-y dark:divide-gray-700">
<div
class="flex flex-col py-3 space-y-3 md:flex-row md:items-center md:justify-between md:space-y-0 md:space-x-4"
>
<div class="flex items-center flex-1 space-x-4">
<button
type="button"
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 mr-2"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
/>
</svg>
All channels: 1,635
</button>
<button
type="button"
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 mr-2"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
/>
</svg>
Languages: 5
</button>
</div>
<div
class="flex flex-col items-start flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"
>
<button
type="button"
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-2 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 mr-2"
aria-hidden="true"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
/>
</svg>
Table settings
</button>
</div>
</div>
<div
class="flex flex-col items-stretch justify-between py-4 space-y-3 md:flex-row md:items-center md:space-y-0"
>
<button
type="button"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>
<svg
class="h-3.5 w-3.5 mr-2"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
/>
</svg>
Add new user
</button>
<div
class="inline-flex flex-col rounded-md shadow-sm md:flex-row"
role="group"
>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-t-lg md:rounded-tr-none md:rounded-l-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Suspend all</button
><button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-gray-200 border-x md:border-x-0 md:border-t md:border-b hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Archive all</button
><button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-b-lg md:rounded-bl-none md:rounded-r-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-primary-500 dark:focus:text-white"
>
Delete all
</button>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
>
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
>
<tr>
<th scope="col" class="px-4 py-3">Name</th>
<th scope="col" class="px-4 py-3 hidden md:table-cell">
Network
</th>
<th scope="col" class="px-4 py-3 hidden lg:table-cell">
Categories
</th>
<th scope="col" class="px-4 py-3">Language</th>
<th scope="col" class="px-4 py-3 hidden lg:table-cell">
Last Activity
</th>
<th
scope="col"
class="px-4 py-3 hidden sm:table-cell whitespace-nowrap"
>
Socials
</th>
<th scope="col" class="px-4 py-3">
<span class="sr-only">Channel Link</span>
</th>
</tr>
</thead>
<tbody>
<tr
class="border-b dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
>
<th
scope="row"
class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
<a href="#" class="flex items-center">
<img
src="{{ url_for('static', filename='src/miko.jpg') }}"
alt="iMac Front Image"
class="inline w-auto h-8 mr-3 rounded-full"
/>
<span class="truncate hover:bg-gray-200 rounded px-1"
>Sakura Miko</span
>
</a>
</th>
<td
class="hidden md:table-cell px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
<div class="flex items-center">
<a
href="#"
class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
>
Hololive
</a>
</div>
</td>
<td
class="hidden lg:table-cell px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
<div class="flex items-center">
<a
href="#"
class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
>
Gaming
</a>
<a
href="#"
class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
>
Music
</a>
<a
href="#"
class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
>
Free Talk
</a>
</div>
</td>
<td
class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
<div class="flex items-center">
<a
href="#"
class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
>
Japanese
</a>
<a
href="#"
class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300"
>
English
</a>
</div>
</td>
<td
class="hidden lg:table-cell px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
<div class="flex items-center">12 minutes ago</div>
</td>
<td class="hidden sm:table-cell px-4 py-2 whitespace-nowrap">
<div class="flex items-center space-x-1.5">
<a
class="transition hover:text-gray-900 dark:hover:text-white"
href="#"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M11.508 2.497c.469-.351.89-.773 1.219-1.265a4.613 4.613 0 0 1-1.407.375c.516-.305.89-.774 1.078-1.36a5.197 5.197 0 0 1-1.546.61A2.461 2.461 0 0 0 9.047.083a2.46 2.46 0 0 0-2.461 2.461c0 .188.023.375.07.563A7.14 7.14 0 0 1 1.57.529c-.21.351-.328.773-.328 1.242 0 .844.422 1.594 1.102 2.039-.399-.024-.797-.117-1.125-.305v.024c0 1.195.843 2.18 1.968 2.414a2.748 2.748 0 0 1-.632.093c-.164 0-.305-.023-.47-.046A2.45 2.45 0 0 0 4.384 7.7a4.948 4.948 0 0 1-3.047 1.055c-.211 0-.399-.023-.586-.047A6.857 6.857 0 0 0 4.523 9.81c4.524 0 6.985-3.727 6.985-6.985v-.328Z"
/>
</svg>
</a>
</div>
</td>
<td
class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
<a
href="#"
class="inline-flex items-center p-1 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none dark:text-gray-400 dark:hover:text-gray-100"
>
<svg
class="w-4 h-4 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"
/>
</svg>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<nav
class="flex flex-col items-start justify-between p-4 space-y-3 md:flex-row md:items-center md:space-y-0"
aria-label="Table navigation"
>
<div class="flex items-center space-x-3">
<label
for="rows"
class="text-xs font-normal text-gray-500 dark:text-gray-400"
>Rows per page</label
><select
id="rows"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block py-1.5 pl-3.5 pr-6 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="" value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<div class="text-xs font-normal text-gray-500 dark:text-gray-400">
<span class="font-semibold text-gray-900 dark:text-white"
>1-10</span
>
of
<span class="font-semibold text-gray-900 dark:text-white"
>100</span
>
</div>
</div>
<ul class="inline-flex items-stretch -space-x-px">
<li>
<a
href="#"
class="flex text-sm w-20 items-center justify-center h-full py-1.5 px-3 ml-0 text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>Previous</a
>
</li>
<li>
<a
href="#"
class="flex text-sm w-20 items-center justify-center h-full py-1.5 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>Next</a
>
</li>
</ul>
</nav>
</div>
</div>
</section>
</div>
<!-- categories -->
<div
class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
<section class="bg-white dark:bg-gray-900 antialiased">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
<div class="max-w-3xl mx-auto text-center">
<h2
class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white"
>
Our people make us great
</h2>
<p
class="mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400"
>
You'll interact with talented professionals, will be challenged to
solve difficult problems and think in new and creative ways.
</p>
</div>
<div
class="grid grid-cols-1 gap-4 mt-8 lg:mt-16 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
>
<a href="#" class="relative overflow-hidden rounded-lg group">
<img
class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
alt=""
/>
<div
class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
>
<div class="text-center">
<p class="text-xl font-bold text-white">Thomas Lean</p>
<p class="text-base font-medium text-gray-300">Marketing</p>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden rounded-lg group">
<img
class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
alt=""
/>
<div
class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
>
<div class="text-center">
<p class="text-xl font-bold text-white">Thomas Lean</p>
<p class="text-base font-medium text-gray-300">Marketing</p>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden rounded-lg group">
<img
class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
alt=""
/>
<div
class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
>
<div class="text-center">
<p class="text-xl font-bold text-white">Thomas Lean</p>
<p class="text-base font-medium text-gray-300">Marketing</p>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden rounded-lg group">
<img
class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
alt=""
/>
<div
class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
>
<div class="text-center">
<p class="text-xl font-bold text-white">Thomas Lean</p>
<p class="text-base font-medium text-gray-300">Marketing</p>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden rounded-lg group">
<img
class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
alt=""
/>
<div
class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
>
<div class="text-center">
<p class="text-xl font-bold text-white">Thomas Lean</p>
<p class="text-base font-medium text-gray-300">Marketing</p>
</div>
</div>
</a>
<a href="#" class="relative overflow-hidden rounded-lg group">
<img
class="object-cover w-full h-[320px] lg:h-auto scale-100 ease-in duration-300 group-hover:scale-125"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-12.png"
alt=""
/>
<div
class="absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60"
>
<div class="text-center">
<p class="text-xl font-bold text-white">Thomas Lean</p>
<p class="text-base font-medium text-gray-300">Marketing</p>
</div>
</div>
</a>
</div>
<div
class="max-w-3xl p-4 mx-auto mt-8 rounded-md lg:mt-16 bg-gray-50 dark:bg-gray-800"
>
<div
class="flex flex-col justify-between gap-3 md:gap-6 md:items-center md:flex-row"
>
<div class="flex items-center gap-1.5">
<svg
aria-hidden="true"
class="hidden w-5 h-5 text-gray-800 dark:text-gray-400 md:block shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
/>
</svg>
<span
class="text-base font-normal text-gray-700 dark:text-gray-400"
>
<span class="font-semibold">
Want to join the Flowbite team?
</span>
We are growing our community.
</span>
</div>
<a
href="#"
title=""
class="inline-flex items-center text-base font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Join our team
<svg
aria-hidden="true"
class="w-5 h-5 ml-1.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</div>
</section>
</div>
<!-- clips -->
<div
class="border-none border-dashed rounded-lg border-gray-300 dark:border-gray-600 mb-4"
>
<aside
aria-label="Related articles"
class="py-8 bg-white lg:py-16 dark:bg-gray-900 antialiased"
>
<div class="px-4 mx-auto max-w-screen-xl">
<h2 class="mb-8 text-2xl font-bold text-gray-900 dark:text-white">
Read Next
</h2>
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 2"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#">How AI is transforming your smartphone</a>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 2"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#">How AI is transforming your smartphone</a>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 2"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#">How AI is transforming your smartphone</a>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 2"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#">How AI is transforming your smartphone</a>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-2.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 2"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#">How AI is transforming your smartphone</a>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-3.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 3"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#">Android, ChromeOS, and the future of app discovery</a>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-4.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 4"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#">What Google collaboration app offers remote teams</a>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-5.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 5"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#"
>Collaboration app spending grows in the face of crisis</a
>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 6"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#"
>For developers, too many meetings, too little 'focus' time</a
>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 6"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#"
>For developers, too many meetings, too little 'focus' time</a
>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 6"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#"
>For developers, too many meetings, too little 'focus' time</a
>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
<article>
<a href="#">
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/articles/wordpress/image-6.jpg"
class="mb-5 w-full max-w-full rounded-lg"
alt="Image 6"
/>
</a>
<h2
class="mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white"
>
<a href="#"
>For developers, too many meetings, too little 'focus' time</a
>
</h2>
<a
href="#"
class="inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500 hover:no-underline"
>
Read more
</a>
</article>
</div>
</div>
</aside>
</div>
{% endblock content %}