{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}Style Guide{% endblock %}

{% block content %}
  <div class="py-0 px-3 mb-3 md:py-6 md:px-0" x-data="{
		mode: localStorage.getItem('colorMode'),
		setColorMode: m => {
				if (m === 'dark') {
						document.documentElement.classList.add('dark')
						localStorage.setItem('colorMode', 'dark')
				} else {
						document.documentElement.classList.remove('dark')
						localStorage.setItem('colorMode', 'light')
				}
				document.head.querySelectorAll('.meta-theme').forEach((el) => {
					el.setAttribute('content', el.getAttribute('data-' + m));
				});
		}
}">
		<div class="grid grid-cols-1 gap-6">

			<div class="p-2">
				<div class="mb-4">
					<h1 class="text-3xl font-extrabold md:text-6xl">
						<span class="block xl:inline">Homepage header.</span>
					</h1>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<h1 class="text-3xl font-extrabold md:text-6xl">
	<span class="block xl:inline">Homepage header.</span>
</h1>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="mb-4">
					<span class="text-xl md:text-3xl lg:text-3xl">Page Header</span>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<span class="text-xl md:text-3xl lg:text-3xl">Page Header</span>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="mb-4">
					<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
						<h3 class="pb-2 mb-4 text-3xl capitalize border-b border-gray-400 text-orange dark:border-slate">Panel Header</h3>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:my-16 lg:space-y-0 lg:space-x-12">
	<div class="p-6 relative bg-white rounded-lg md:p-11 lg:w-1/2 dark:bg-charcoal">
		<h3 class="pb-2 mb-4 text-3xl capitalize border-b border-gray-400 text-orange dark:border-slate">Panel Header</h3>
	</div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
					<h5 class="text-2xl leading-tight text-orange">Community Panel Header</h5>
					<p class="py-1 my-2 border-b border-gray-700 text-slate dark:text-white">
						Panel Subheader
					</p>
					<p class="text-slate dark:text-white">Panel paragraph text..</p>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
	<h5 class="text-2xl leading-tight text-orange">Community Panel Header</h5>
	<p class="py-1 my-2 border-b border-gray-700">
		Panel Subheader
	</p>
	<p>Panel paragraph text..</p>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>


			<br clear="all" />

			<div class="p-2">
				<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
					<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal !pr-60">
						<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-orange/30">Homepage Panel Category</span>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
	<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
		<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-orange/30">Homepage Panel Category</span>
	</div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div>
					<a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">Site Link</a>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">Site Link</a>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div>
					<div class="items-center px-5 pt-4 mt-4 text-center">
						<div class="justify-between pt-3 pb-3 sm:space-x-3 xl:space-x-6 border-dotted border-t-2 px-20 border-t-white/5 w-fit mx-auto">
							<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
							<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
							<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
							<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
							<span class="inline sm:hidden text-white/30">&nbsp;&nbsp; | &nbsp;&nbsp;</span>
							<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
						</div>
						<div><span class="text-sm">Additional text in footer with <a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">a link with the normal link style</a>.</span></div>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="items-center px-5 pt-4 mt-4 text-center">
	<div class="justify-between pt-3 pb-3 sm:space-x-3 xl:space-x-6 border-dotted border-t-2 px-20 border-t-white/5 w-fit mx-auto">
		<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
		<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
		<a class="block my-2 sm:inline hover:text-orange" href="#">Footer Link</a>
		<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
		<span class="inline sm:hidden text-white/30">&nbsp;&nbsp; | &nbsp;&nbsp;</span>
		<a class="my-2 inline hover:text-orange" href="#">Footer Link</a>
	</div>
	<div><span class="text-sm">Additional text in footer with <a href="#" class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">a link with the normal link style</a>.</span></div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
					<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal !w-96">
						<div class="absolute top-6 right-8 p-2 group">
							<a href="{% url 'libraries' %}"
								class="text-sm font-medium md:text-base lg:text-base  text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
								Homepage Panel All Items &nbsp;<i class="fas fa-chevron-right  text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
							</a>
						</div>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
	<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
		<div class="absolute top-6 right-8 p-2 group">
			<a href="{% url 'libraries' %}"
				class="text-sm font-medium md:text-base lg:text-base  text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
				Homepage Panel All Items &nbsp;<i class="fas fa-chevron-right  text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
			</a>
		</div>
	</div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
					<div class="grid grid-cols-2 lg:grid-cols-3">
						<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
							<h6 class="pb-1 text-base">News/Community Link/Button 1</h6>
							<i class="fa fa-helmet-safety"></i>
						</a>
						<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
							<h6 class="pb-1 text-base">News/Community Link/Button 2</h6>
							<i class="fa fa-helmet-safety"></i>
						</a>
						<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
							<h6 class="pb-1 text-base">News/Community Link/Button 3</h6>
							<i class="fa fa-helmet-safety"></i>
						</a>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="p-6 text-white bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
	<div class="grid grid-cols-2 lg:grid-cols-3">
		<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
			<h6 class="pb-1 text-base">Community Link/Button 1</h6>
			<i class="fa fa-helmet-safety"></i>
		</a>
		<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
			<h6 class="pb-1 text-base">Community Link/Button 2</h6>
			<i class="fa fa-helmet-safety"></i>
		</a>
		<a href="#" class="p-3 text-center rounded-lg cursor-pointer hover:bg-gray-100 group dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
			<h6 class="pb-1 text-base">Community Link/Button 3</h6>
			<i class="fa fa-helmet-safety"></i>
		</a>
	</div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />


			<div class="p-2">
				<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
					<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
						<div class="-ml-2 h-14">
							<a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
								href="#">
								<span class="dark:text-white text-slate">Button/Link on Releases/Library Detail</span>
								<span class="block text-xs">additional text</span>
							</a>
						</div>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
	<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
		<div class="-ml-2 h-14">
			<a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
				href="#">
				<span class="dark:text-white text-slate">Button/Link on Releases/Library Detail</span>
				<span class="block text-xs">additional text</span>
			</a>
		</div>
	</div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="group flex space-y-3 max-w-md md:space-y-0 p-6">
          <a href="{% url 'releases-most-recent' %}" class="w-80 flex justify-left items-center py-4 pl-6 md:pl-3 text-base font-medium link-header text-white rounded-md border md:text-lg border-orange bg-orange dark:bg-charcoal dark:hover:bg-charcoal/75">
            <i class="pl-2 pr-7 md:pr-6 text-white group-hover:text-sky-600 fas fa-arrow-circle-down dark:text-orange"></i> Homepage Hero Button
          </a>
        </div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<a href="{% url 'releases-most-recent' %}" class="w-80 flex justify-left items-center py-4 pl-6 md:pl-3 text-base font-medium link-header text-white rounded-md border md:text-lg border-orange bg-orange dark:bg-charcoal dark:hover:bg-charcoal/75">
	<i class="pl-2 pr-7 md:pr-6 text-white group-hover:text-sky-600 fas fa-arrow-circle-down dark:text-orange"></i> Homepage Hero Button
</a>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="space-y-6 w-full text-center">
          <a class="relative w-96 block px-20 py-3 text-base font-medium rounded-md border border-orange !text-white hover:!text-white bg-orange hover:bg-orange/80 dark:bg-slate dark:hover:bg-charcoal hover:drop-shadow-md md:py-4 md:text-lg md:px-10"
       			href="#">
        		<span class="absolute right-1 top-1 text-xs bg-white text-slate rounded p-1">Special Notice</span>
        		<i class="fas fa-icons"></i> Provider Button
    			</a>
        </div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="space-y-6 w-full text-center">
	<a class="relative w-96 block px-20 py-3 text-base font-medium rounded-md border border-orange !text-white hover:!text-white bg-orange hover:bg-orange/80 dark:bg-slate dark:hover:bg-charcoal hover:drop-shadow-md md:py-4 md:text-lg md:px-10"
			href="#">
		<span class="absolute right-1 top-1 text-xs bg-white text-slate rounded p-1">Special Notice</span>
		<i class="fas fa-icons"></i> Provider Button
	</a>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
					<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
						<div class="flex justify-between space-x-16">
							<a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="#">Cancel Button</a>
							<button type="submit" class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange hover:bg-orange/80 border-orange dark:bg-slate dark:hover:bg-charcoal dark:text-white hover:drop-shadow-md">Action Button</button>
						</div>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="flex justify-between">
	<a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange" href="#">Cancel Button</a>
	<button type="submit" class="py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-md border md:py-1 md:px-4 md:text-lg bg-orange hover:bg-orange/80 border-orange dark:bg-slate dark:hover:bg-charcoal dark:text-white hover:drop-shadow-md">Action Button</button>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
					<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
						<div class="w-full bg-white dark:bg-charcoal mx-auto rounded py-6 px-3" id="signup_form">
							<label>Text Field</label>
							<input type="email" name="text" placeholder="Enter text.." required="" id="" />
						</div>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="w-full bg-white dark:bg-charcoal mx-auto rounded py-6 px-3" id="signup_form">
	<label>Text Field</label>
	<input type="email" name="text" placeholder="Enter text.." required="" id="" />
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="flex relative space-x-3 justify-between md:justify-start">
					<div>
						<div class="flex space-x-3">
							<div><a title="Name View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-list p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
							<div><a title="Grid View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-th-large p-[10px] bg-gray-100 dark:bg-slate"></i></a></div>
							<div><a title="Category View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-cat p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
						</div>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="flex relative space-x-3 justify-between md:justify-start">
	<div>
		<div class="flex space-x-3">
			<div><a title="Name View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-list p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
			<div><a title="Grid View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-th-large p-[10px] bg-gray-100 dark:bg-slate"></i></a></div>
			<div><a title="Category View" href="#"><i class="link rounded border border-gray-300 cursor-pointer fas fa-cat p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
		</div>
	</div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div>
					<select class="dropdown">
							<option value="">Dropdown Menu</option>
					</select>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div>
	<select class="dropdown">
			<option value="">Dropdown Menu</option>
	</select>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<div class="space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
					<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
						<p>Paragraph text in panel..</p>
					</div>
				</div>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<div class="my-4 space-y-4 lg:flex lg:space-y-0 lg:space-x-12">
	<div class="p-6 relative bg-white rounded-lg md:p-11 dark:bg-charcoal">
		<p>Paragraph text in panel..</p>
	</div>
</div>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<p>Paragraph text outside panel..</p>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<p>Paragraph text outside panel..</p>
{% endfilter %}</pre></div>
				</div>

			</div>

			<br clear="all" />

			<div class="p-2">
				<span class="inline-block h-[30px] w-[30px] bg-white rounded dark:text-white mt-1 dark:bg-slate border border-gray-400 dark:border-gray-500">
					<i class="fas fa-user text-2xl ml-[4px]"></i>
				</span>
				<br clear="all" />
				<span class="inline-block h-[30px] w-[30px] overflow-hidden rounded mt-1 border border-gray-400 dark:border-gray-500">
					<img src="https://s3.dualstack.us-east-2.amazonaws.com/boost.org.media/profile-images/IMG_6155_1.jpg" alt="user" class="h-full w-full cursor-pointer object-cover"/>
				</span>

				<p>User Avatars</p>

				<button class="rounded-full py-2 text-xs cursor-pointer w-4 whitespace-nowrap" @click="if (mode == 'dark') { mode='light'; setColorMode('light'); } else { mode='dark'; setColorMode('dark'); }"><i class="hidden dark:inline-block mr-1 font-semibold fas fa-sun text-white px-2 mx-2"></i><i class="inline-block dark:hidden mr-1 font-semibold fas fa-moon text-black px-2 mx-2"></i></button>

				<div class="mt-2 py-2 px-2 space-y-2 w-full bg-white rounded-lg dark:bg-charcoal">
					<div class="highlight" style="background: #002b36"><pre style="line-height: 125%;">{% filter force_escape %}
<span class="inline-block h-[30px] w-[30px] bg-white rounded dark:text-white mt-1 dark:bg-slate border border-gray-400 dark:border-gray-500">
	<i class="fas fa-user text-2xl ml-[4px]"></i>
</span>
<span class="inline-block h-[30px] w-[30px] overflow-hidden rounded mt-1 border border-gray-400 dark:border-gray-500">
	<img src="https://s3.dualstack.us-east-2.amazonaws.com/boost.org.media/profile-images/IMG_6155_1.jpg" alt="user" class="h-full w-full cursor-pointer object-cover"/>
</span>
{% endfilter %}</pre></div>
				</div>

			</div>

		</div>
  </div>
{% endblock %}