<!DOCTYPE html>
<html class="en-GB">
<head>
<title>UI components built with Tailwind and Stimulus</title>
<meta name="description" content="Sjabloon comes with many UI, including a fully designed user dashboard, components built with Tailwind's CSS utilities and Stimulus. All easy and quick to change to match your product's design." />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="N+7GIMV5c/wS5Zr2cQH+CuOyZ8gBaVOHNHtvjCA+73fw1GDzsDdp2a4eirPv54KDm13Zbnk/5ebXsZWczkSu1w==" />
<script src="https://js.stripe.com/v3/"></script>
<meta property="og:site_name" content="Sjabloon">
<meta property="og:title" content="UI components built with Tailwind and Stimulus" />
<meta property="og:description" content="Sjabloon comes with many UI, including a fully designed user dashboard, components built with Tailwind's CSS utilities and Stimulus. All easy and quick to change to match your product's design.">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.getsjabloon.com/features/ui-components" />
<meta property="og:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ntscHQ">
<meta name="twitter:domain" value="getsjabloon.com" />
<meta name="twitter:title" value="UI components built with Tailwind and Stimulus" />
<meta name="twitter:description" value="Sjabloon comes with many UI, including a fully designed user dashboard, components built with Tailwind's CSS utilities and Stimulus. All easy and quick to change to match your product's design." />
<meta property="twitter:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:url" value="https://www.getsjabloon.com/features/ui-components" />
<meta property="og:logo" content="https://www.getsjabloon.com/logo.jpg" />
<script src="/packs/js/application-52108bb48a94ea445faf.js" data-turbolinks-track="reload"></script>
<link rel="stylesheet" media="screen" href="/packs/css/application-49f7a508.css" data-turbolinks-track="reload" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="6ZvJ4u5D3MhqQhHVjdjAzRUq66Za_Xez7zSLX7tJ-E0" />
</head>
<body class="">
<div class="site-announcement" data-controller="site-announcements" data-target="site-announcements.banner" data-site-announcements-id="37" data-site-announcements-site-name="sjabloon">
<span class="site-announcement__badge site-announcement__badge--#{last_announcement.announcement_type}">
news
</span>
<a class="site-announcement__title" href="https://railsdesigner.com/">Professionally designed UI components to build your next Ruby on Rails app even faster</a>
<a class="site-announcement__action" href="https://railsdesigner.com/">Check it out</a>
<button class="site-announcement__close" data-action="click->site-announcements#dismiss">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="site-announcement__close-icon"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="icon-shape"> <polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon> </g> </g> </svg>
</button>
</div>
<nav class="justify-between text-sm leading-tight nav" data-controller="navigation" data-target="navigation.component" data-action="scroll@window->navigation#onScroll">
<a class="inline-flex" href="/">
<svg width="30" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><title>logo</title><defs><linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="a"><stop stop-color="#00CAFF" offset="0%"/><stop stop-color="#009AFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><circle fill="url(#a)" cx="100" cy="100" r="100"/><path d="M126.412 145.011v16.379H72.565v-16.379H46L83.558 39h35.136l37.356 106.011h-29.638zm-7.464-24.006L102.54 64.847l-16.267 56.158h32.676z" fill="#FFF"/></g></svg>
</a>
<div class="nav__items" data-target="navigation.items">
<a class="nav__item nav__link" href="/login">log in</a>
</div>
<span role="link" class="navigation__item navigation__toggle" data-target="navigation.toggle" data-action="click->navigation#toggle">menu</span>
</nav>
<div class="overflow-hidden hero">
<div class="container feature-hero">
<span class="feature-hero__tag">Feature</span>
<h1 class="feature-hero__heading">
UI components built with Tailwind and Stimulus
</h1>
<p class="feature-hero__intro">Sjabloon comes with many UI components used in almost every SaaS applications and <a href="/features/beautiful-themes">three custom-designed homepages</a> and an <a href="/features/user-dashboard">user dashboard</a>. All these components are built using Tailwind's utility classes. With TailwindCss as the basis everything is really easy and quick to modify to fit your needs. StimulusJS is used where mentioned.</p>
<div class="flex items-center my-8">
<a class="btn btn--secondary-outline ml-4" href="#components">Browse components</a>
</div>
</div>
<div class="chrome-wrapper">
<div class="chrome">
<div class="chrome__traffic-lights">
<span class="chrome__traffic-light chrome__traffic-light--close" role="button">
<svg width="96" height="96" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" class="chrome__traffic-icon"><title>close</title>
<path d="M44.788 48.451L27.175 30.878a4 4 0 0 1 5.65-5.664l17.613 17.574 17.574-17.613a4 4 0 0 1 5.663 5.65L56.102 48.438l17.613 17.574a4 4 0 0 1-5.65 5.663L50.45 54.102 32.878 71.715a4 4 0 0 1-5.664-5.65L44.788 48.45z"></path></svg>
</span>
<span class="chrome__traffic-light chrome__traffic-light--minimise" role="button">
<svg width="96" height="96" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" class="chrome__traffic-icon"><title>minimise</title>
<path d="M22.004 52.065a4 4 0 1 1-.008-8L79.757 44a4 4 0 1 1 .01 8l-57.763.065z"></path></svg>
</span>
<span class="chrome__traffic-light chrome__traffic-light--maximise" role="button">
<svg width="96" height="96" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" class="chrome__traffic-icon"><title>maximise</title>
<path d="M37.069 24H72a4 4 0 0 1 4 4v34.917L37.069 24zM65.93 73H31a4 4 0 0 1-4-4V34.083L65.931 73z"></path></svg>
</span>
</div>
<div class="cli" style="white-space: pre"> <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "card p-4" }) do |f| %>
<h1 class="mt-2 mb-6 text-xl">Log in</h1>
<div class="field">
<%= f.label :email %>
<%= f.email_field :email, autocomplete: "email", class: "input" %>
</div>
<div class="field">
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "current-password", class: "input" %>
</div>
<div class="buttons">
<%= f.submit "Log in", class: "btn btn--primary" %>
</div>
<% end %> </div>
</div>
</div>
</div>
<div class="flex max-w-5xl mx-auto mt-16" id="components">
<div class="sticky top-0 flex-col hidden w-1/3 h-screen pt-2 pr-4 overflow-y-auto sm:flex" style="position: -webkit-sticky">
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#navigation">Navigation</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#form-components">Form components</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#form-validation">Form validation</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#switch-component">Switch component</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#buttons">Buttons</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#signup-form">Signup form</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#cards">Cards</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#pills">Pills</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#loaders">Loaders</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#dropdown">Dropdown</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#announcements_dropdown">Announcements dropdown</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#dropzone">Dropzone</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#modals">Modals</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#accordion">Accordion</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#tabs">Tabs</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#testimonials">Testimonials</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#grid">Grid</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#tables">Tables</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#comments">Comments</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#flash-messages">Flash messages</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#pagination">Pagination</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#progress-bars">Progress bars</a>
<a class="block pb-2 mb-2 text-sm font-semibold text-gray-600 hover:text-gray-700" href="#animations">Animations</a>
</div>
<div class="w-full sm:w-2/3 scroll-smooth">
<div class="pb-8 mb-8 border-b" id="navigation">
<h2 class="flex items-center mb-4 text-2xl font-bold">Navigation <span class="px-3 py-1 ml-2 text-xs font-bold text-gray-700 bg-gray-200 rounded-full">using Stimulus</span></h2>
<p class="mb-4">The navigation collapses on smaller screens and comes with the option to add a class class on scroll.</p>
<nav class="relative border-2 border-gray-200 rounded nav" data-controller="navigation">
<a class="text-base font-black text-gray-700 tracking-wide uppercase no-underline" href="/">Your App</a>
<div class="nav__items" data-target="navigation.items">
<a class="nav__item nav__link" href="/login">log in</a>
</div>
<span role="link" class="navigation__item navigation__toggle" data-target="navigation.toggle" data-action="click->navigation#toggle"> menu </span>
</nav>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="form-components">
<h2 class="flex items-center mb-4 text-2xl font-bold">Form components</h2>
<div class="field">
<label for="field">Name</label>
<input type="text" id="field" class="input">
</div>
<div class="field">
<label for="comment">Comment <span class="field__helper">(be nice, please)</span></label>
<textarea id="comment" class="input" name="comment" cols="30" rows="4"></textarea>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<h3 class="flex items-center mt-8 mb-4 text-xl font-bold">Inline form</h3>
<form class="fields-inline items-end p-4 border-2 border-gray-200 rounded">
<div class="field">
<label for="email">Email</label>
<input type="text" id="email" class="input rounded-r-none">
</div>
<div class="field">
<a href="#" class="btn btn--primary rounded-l-none">Sign me up!</a>
</div>
</form>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8">
<h2 class="flex items-center mb-4 text-2xl font-bold">Buttons</h2>
<a href="#" class="btn btn--primary">Button Primary</a>
<a href="#" class="btn btn--secondary">Button Secondary</a>
<a href="#" class="btn btn--primary-outline">Button Outline</a>
<a href="#" class="btn">Text Button</a>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8">
<h2 class="flex items-center mb-4 text-2xl font-bold">Checkbox- / radio-buttons</h2>
<div class="field-centered">
<input type="radio" name="radios" class="input-radio" id="option-1" value="1" checked />
<label class="mb-0" for="option-1">Option 1</label>
</div>
<div class="field-centered">
<input type="radio" name="radios" class="input-radio text-gray-800" id="option-2" />
<label class="mb-0" for="option-2">Option 2</label>
</div>
<div class="field-centered">
<input type="radio" name="radios" class="input-radio text-gray-800" id="option-3" />
<label class="mb-0" for="option-3">Option 3</label>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<h3 class="flex items-center mt-8 mb-4 text-xl font-bold">Checkboxes</h3>
<div class="field-centered">
<input type="checkbox" name="checkboxs" class="input-checkbox" id="amsterdam" value="1" checked />
<label class="mb-0" for="amsterdam">Amsterdam</label>
</div>
<div class="field-centered">
<input type="checkbox" name="checkboxs" class="input-checkbox text-gray-800" id="bangkok" />
<label class="mb-0" for="bangkok">Bangkok</label>
</div>
<div class="field-centered">
<input type="checkbox" name="checkboxs" class="input-checkbox text-gray-800" id="cape-town" />
<label class="mb-0" for="cape-town">Cape Town</label>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8">
<h2 class="flex items-center mb-4 text-2xl font-bold">Stylish checkbox- / radio-buttons</h2>
<div class="flex">
<div class="radio-button w-1/3">
<input type="radio" class="radio-button__input" name="coffee" id="espresso" value="espresso" checked>
<label for="espresso" class="radio-button__label text-center">
<p class="mb-0 font-semibold text-md">Espresso</p>
<p class="mb-0 text-3xl">$2.39</p>
</label>
</div>
<div class="radio-button w-1/3">
<input type="radio" class="radio-button__input" name="coffee" id="americano" value="americano">
<label for="americano" class="radio-button__label text-center">
<p class="mb-0 font-semibold text-md">Americano</p>
<p class="mb-0 text-3xl">$2.99</p>
</label>
</div>
<div class="radio-button w-1/3">
<input type="radio" class="radio-button__input" name="coffee" id="cold" value="cold">
<label for="cold" class="radio-button__label text-center">
<p class="mb-0 font-semibold text-md">Cold Brew</p>
<p class="mb-0 text-3xl">$3.99</p>
</label>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="form-validation">
<h2 class="flex items-center mb-4 text-2xl font-bold">Form validation <span class="ml-2 text-xs font-bold px-3 py-1 rounded-full bg-gray-200 text-gray-700">using Stimulus</span></h2>
<p class="mb-4">The form can only be submitted when all required fields are filled (uses the HTML5 regex).</p>
<form class="" data-controller="form-validation" data-target="form-validation.form" data-action="ajax:beforeSend->form-validation#submitForm" novalidate="novalidate" action="#" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="GWtjro0gw1lWTPV4gkndbvrjxDVyH/NlilCYvgxMiXwjQQTVGUDwQptpvTmytxDpwfdyqLa+nlkxm8K45i2WbA==" />
<div class="field">
<label for="required_field">Required field</label>
<input placeholder="A required field" required="required" class="input" type="text" name="required_field" id="required_field" />
</div>
<div class="actions">
<input type="submit" name="commit" value="You shall not pass" class="btn btn--primary block w-full" data-disable-with="You shall not pass" />
</div>
</form></div>
<div class="border-b pb-8 mb-8" id="switch-component">
<h2 class="flex items-center mb-4 text-2xl font-bold">Switches (checkbox)</h2>
<div class="field flex items-center">
<input type="checkbox" checked="checked" id="remember_me" class="tgl tgl-light">
<label class="tgl-btn" for="remember_me"></label>
<label for="remember_me" class="ml-2">remember me</label>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="buttons">
<h2 class="flex items-center mb-4 text-2xl font-bold">Buttons</h2>
<a href="#" class="btn btn--primary">Button Primary</a>
<a href="#" class="btn btn--secondary">Button Secondary</a>
<a href="#" class="btn btn--primary-outline">Button Outline</a>
<a href="#" class="btn">Text Button</a>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="signup-form">
<h2 class="flex items-center mb-4 text-2xl font-bold">Sign up/log in form</h2>
<form class="card card--light p-4" id="new_user" action="#" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="YZVo2V+A5XcfFcjkk3qmmdjHbyd00Q3uQnmzoSzV0b1bvw+iy+DWbNIwgKWjhGse49PZurBwYNL5sumnxrTOrQ==" />
<h1 class="mt-2 mb-6 text-xl font-semibold">Create an account</h1>
<div class="field">
<label for="user_name">Name</label>
<input placeholder="Your full name" class="input" type="text" name="user[name]" id="user_name" />
</div>
<div class="field">
<label for="user_email">Email</label>
<input placeholder="Your email" autocomplete="email" class="input" type="email" value="" name="user[email]" id="user_email" />
</div>
<div class="field">
<label for="user_password">Password</label>
<input placeholder="•••••••••••••" autocomplete="new-password" class="input" type="password" name="user[password]" id="user_password" />
</div>
<div class="field flex items-center">
<input name="user[newsletter_subscribed]" type="hidden" value="0" /><input class="tgl tgl-light" type="checkbox" value="1" name="user[newsletter_subscribed]" id="user_newsletter_subscribed" />
<label class="tgl-btn" for="user_newsletter_subscribed"></label>
<label for="user_newsletter_subscribed" class="ml-2">Get product updates, news and tips</label>
</div>
<div class="actions">
<input type="submit" name="commit" value="Create an account" class="btn btn--primary" data-disable-with="Create an account" />
</div>
</form> <div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<div class="mt-8 mx-auto">
<div class="card card--light flex flex-col sm:flex-row">
<div class="flex flex-row items-center w-full sm:w-1/3 bg-gray-800 text-center text-gray-300">
<div class="w-full p-4 sm:p-8">
<h2 class="mb-4 text-3xl font-medium leading-tight">Welcome to sjabloon</h2>
<p class="mb-0">Already have any account?</p> <a class="text-gray-100" href="/login">Log in</a>
</div>
</div>
<form class="w-full sm:w-2/3 p-4" id="new_user" action="#" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="uF25iQx/sAHvove/WGcR71kLDiDqd/i+M4VBGohHydyCd97ymB+DGiKHv/5omdxoYh+4vS7WlYKIThscYibWzA==" />
<h1 class="mt-2 mb-6 text-xl font-semibold">Create an account</h1>
<div class="field">
<label for="user_name">Name</label>
<input placeholder="Your full name" class="input" type="text" name="user[name]" id="user_name" />
</div>
<div class="field">
<label for="user_email">Email</label>
<input placeholder="Your email" autocomplete="email" class="input" type="email" value="" name="user[email]" id="user_email" />
</div>
<div class="field">
<label for="user_password">Password</label>
<input placeholder="•••••••••••••" autocomplete="new-password" class="input" type="password" name="user[password]" id="user_password" />
</div>
<div class="field flex items-center">
<input name="user[newsletter_subscribed]" type="hidden" value="0" /><input class="tgl tgl-light" type="checkbox" value="1" name="user[newsletter_subscribed]" id="user_newsletter_subscribed" />
<label class="tgl-btn" for="user_newsletter_subscribed"></label>
<label for="user_newsletter_subscribed" class="ml-2">Get product updates, news and tips</label>
</div>
<div class="actions">
<input type="submit" name="commit" value="Create an account" class="btn btn--primary" data-disable-with="Create an account" />
</div>
</form> </div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="cards">
<h2 class="flex items-center mb-4 text-2xl font-bold">Cards</h2>
<div class="card card--light mb-8">
<p class="card__content">
Example card with a white background.
</p>
</div>
<div class="card card--dark mb-8">
<p class="card__content">
Do not go gentle into that good night…
</p>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<div class="card card--light card--horizontal mt-8 mb-8 max-w-2xl">
<div class="card__image" style="background-image: url('https://images.unsplash.com/photo-1531969112524-ac37343c7941?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')">
</div>
<div class="card__content">
<h3 class="mb-4 text-xl font-semibold">Do not go gentle into that good night</h3>
<p class="mb-4 text-lg text-gray-700">
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.
</p>
<p class="mb-0 text-sm text-gray-600">Dylan Thomas, 1914 - 1953</p>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<div class="card card--light card--horizontal mt-8 mb-8 max-w-xl">
<img class="card__avatar" src="https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=b616b2c5b373a80ffc9636ba24f7a4a9">
<div class="card__content text-center sm:text-left">
<h3 class="mb-0 text-xl font-semibold">Kate Bush</h3>
<p class="mb-4 text-gray-600">Front end Engineer</p>
<a class="inline-block px-3 py-1 border border-blue-500 text-xs font-bold uppercase tracking-wide text-blue-500 no-underline rounded-full hover:text-blue-600 hover:border-blue-600" href="mailto:support@getsjabloon.com">email</a>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<div class="card card--light profile-card mt-8 mb-8 max-w-xl">
<img class="profile-card__cover-image" style="background-image: url('https://images.unsplash.com/photo-1531969112524-ac37343c7941?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')" />
<div class="profile-card__avatar-wrapper">
<img class="profile-card__avatar" src="https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=b616b2c5b373a80ffc9636ba24f7a4a9">
</div>
<div class="card__content text-center">
<h3 class="mb-0 text-xl font-semibold">Kate Bush</h3>
<p class="mb-4 text-gray-600">I create things with Rails, Tailwind and Stimulus</p>
<div class="flex justify-center mt-8">
<div class="pr-4 text-right">
<span class="block text-2xl leading-none font-semibold text-black">459</span>
<span class="text-gray-600">photos</span>
</div>
<div class="pl-4 border-l-2 border-gray-200 text-left">
<span class="block text-2xl leading-none font-semibold text-black">320k</span>
<span class="text-gray-600">followers</span>
</div>
</div>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="pills">
<h2 class="flex items-center mb-4 text-2xl font-bold">Pills</h2>
<span class="pill pill--primary">Coming soon</span>
<span class="pill pill--secondary">New</span>
<span class="pill pill--tertiary">Update</span>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="loaders">
<h2 class="flex items-center mb-4 text-2xl font-bold">Loaders / spinners</h2>
<div class="loader-spinner"></div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<hr class="mt-8">
<span class="loader-blocks ml-4"></span>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="pb-8 mb-8 border-b" id="dropdown">
<h2 class="flex items-center mb-4 text-2xl font-bold">Dropdown <span class="px-3 py-1 ml-2 text-xs font-bold text-gray-700 bg-gray-200 rounded-full">using Stimulus</span></h2>
<div class="px-3 py-2 bg-white border dropdown" data-controller="dropdown">
<div class="dropdown__toggle" data-action="click->dropdown#toggle click@window->dropdown#hide" role="button">
Menu
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="dropdown__icon" data-target="dropdown.icon"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
</div>
<div data-target="dropdown.menu" class="hidden dropdown__menu">
<div class="dropdown__items">
<a class="dropdown__item" href="#">Edit Account</a>
<a class="dropdown__item" href="#">Sign Out</a>
</div>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="announcements_dropdown">
<h2 class="flex items-center mb-4 text-2xl font-bold">Announcements dropdown <span class="ml-2 text-xs font-bold px-3 py-1 rounded-full bg-gray-200 text-gray-700">using Stimulus</span></h2>
<p class="mb-4">The announcements dropdown shows the last three announcements in a dropdown. Similar like Headway and Beamer. It is feeded with the JSON response coming from the AnnouncementsController. It's a nice example on how to use JSON to render an UI component (just like the "big" frameworks).</p>
<button class="relative btn font-medium text-blue-500 border border-blue-500" data-controller="announcements" data-target="announcements.button" data-action="click->announcements#showDropdown click@window->announcements#hideDropdown" data-announcements-open="false" data-announcements-url="https://www.getsjabloon.com/announcements" data-announcements-data-url="https://www.getsjabloon.com/announcements.json">View Announcements</button>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="dropzone">
<h2 class="flex items-center mb-4 text-2xl font-bold">Dropzone <span class="ml-2 text-xs font-bold px-3 py-1 rounded-full bg-gray-200 text-gray-700">using Stimulus</span></h2>
<p class="mb-4">The dropzone component uses dropzone.js to allow for files (images, documents, etc.) to be dropped onto an element after which it's uploaded (needs ActiveStorage in your app). <small class='text-gray-700'>Feature is disabled on this site.</small></p>
<div class="field">
<div class="dropzone p-4 text-center bg-gray-200 border border-gray-500 border-dashed rounded" data-controller="sjabloon--dropzone" data-sjabloon--dropzone-max-file-size="2" data-sjabloon--dropzone-max-files="5">
<div class="dz-message text-gray-600">
<p>Drag here to upload or click to browse</p>
<p class="text-sm">2 MB file size maximum. Maximum of five files.</p>
</div>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id=modals>
<h2 class="flex items-center mb-4 text-2xl font-bold">Modals <span class="ml-2 text-xs font-bold px-3 py-1 rounded-full bg-gray-200 text-gray-700">using Stimulus</span></h2>
<p class="mb-4">The position of the modal can easily be changed by changing the flex properties on <code>.modal-wrapper</code>. The modal takes multiple arguments <code class="font-bold text-gray-700">data-modal-interval-time-in-seconds='10'</code> to show the modal after 10 seconds. And <code class="font-bold text-gray-700">data-modal-stop-scroll=false</code> to allow the page to scroll (default is true).</p>
<div data-controller="modal" data-action="keydown@window->modal#closeWithKeyboard">
<button data-action="click->modal#open" class="btn font-medium text-blue-500 border border-blue-500">Open Modal</button>
<div data-target="modal.container" class="hidden">
<div data-target="modal.background" data-action="click->modal#closeBackground" class="modal-wrapper">
<div class="modal">
<div class="modal__sidebar bg-gray-800">
<h3 class="modal__header">Subscribe to our newsletter</h3>
<p class="mb-0">Be the first to know when Sjabloon get updates, get tips and learn about new releases.</p>
</div>
<div class="modal__content bg-gray-700">
<div class="field mb-2">
<input type="email" placeholder="Your email" class="input">
</div>
<div class="field mb-0">
<a href="#" class="btn btn--primary block text-center">Subcribe to stay up-to-date</a>
</div>
<svg class="modal__close text-gray-200" role="button" data-action="click->modal#close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="accordion">
<h2 class="flex items-center mb-4 text-2xl font-bold">Collapsible/Accordion <span class="ml-2 text-xs font-bold px-3 py-1 rounded-full bg-gray-200 text-gray-700">using Stimulus</span></h2>
<p></p>
<ul class="list-reset accordion border rounded" data-controller="accordion" data-accordion-toggle-icon-class="accordion-item__icon--toggled" data-accordion-active-class="accordion-item__content--active">
<li class="accordion-item">
<header class="accordion-item__header" data-target="accordion.pointer" data-action="click->accordion#toggle">
This can be a question?
<span class="accordion-item__icon" data-target="accordion.icon" role="button">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-3 h-3 text-gray-600 fill-current"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="icon-shape"> <polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon> </g> </g> </svg>
</span>
</header>
<div class="accordion-item__content" data-target="accordion.content">
And this would be the answer to said question. How smart!
</div>
</li>
<li class="accordion-item">
<header class="accordion-item__header" data-target="accordion.pointer" data-action="click->accordion#toggle">
Or you could place other content here too.
<span class="accordion-item__icon" data-target="accordion.icon" role="button">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-3 h-3 text-gray-600 fill-current"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="icon-shape"> <polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon> </g> </g> </svg>
</span>
</header>
<div class="accordion-item__content" data-target="accordion.content">
And this content would linked to that. Makes sense, right?
</div>
</li>
<li class="accordion-item">
<header class="accordion-item__header" data-target="accordion.pointer" data-action="click->accordion#toggle">
The uses cases are near endless. It's up to you.
<span class="accordion-item__icon" data-target="accordion.icon" role="button">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-3 h-3 text-gray-600 fill-current"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="icon-shape"> <polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon> </g> </g> </svg>
</span>
</header>
<div class="accordion-item__content" data-target="accordion.content">
The same with the content here. What are you gonna use this UI component for?
</div>
</li>
</ul>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="tabs">
<h2 class="flex items-center mb-4 text-2xl font-bold">Tabs <span class="ml-2 text-xs font-bold px-3 py-1 rounded-full bg-gray-200 text-gray-700">using Stimulus</span></h2>
<p class="mb-4">Tabs come by default with a dark and light theme.</p>
<div class="tabs-wrapper bg-gray-900 p-4" data-controller="tabs" data-tabs-active-tab="tab--active-dark">
<div class="tabs">
<div class="tab tab--dark" data-target="tabs.tab" data-action="click->tabs#change">
<h5 class="tab__heading tab__heading--dark">
Heading 1
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="tab__icon"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
</h5>
</div>
<div class="tab tab--dark" data-target="tabs.tab" data-action="click->tabs#change">
<h5 class="tab__heading tab__heading--dark">
Heading 2
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="tab__icon"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
</h5>
</div>
<div class="tab tab--dark" data-target="tabs.tab" data-action="click->tabs#change">
<h5 class="tab__heading tab__heading--dark">
Heading 3
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="tab__icon"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
</h5>
</div>
</div>
<div class="panel panel--dark" data-target="tabs.panel">
<h4 class="panel__heading panel__heading--dark">Heading 1</h4>
<p class="panel__content">This is some text in this panel</p>
</div>
<div class="panel panel--dark" data-target="tabs.panel">
<h4 class="panel__heading panel__heading--dark">Heading 2</h4>
<p class="panel__content">This is some text in this panel</p>
</div>
<div class="panel panel--dark" data-target="tabs.panel">
<h4 class="panel__heading panel__heading--dark">Heading 3</h4>
<p class="panel__content">This is some text in this panel</p>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<div class="tabs-wrapper mt-8" data-controller="tabs" data-tabs-active-tab="tab--active-light">
<div class="tabs">
<div class="tab tab--light" data-target="tabs.tab" data-action="click->tabs#change">
<h5 class="tab__heading tab__heading--light">
Heading 1
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="tab__icon"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
</h5>
</div>
<div class="tab tab--light" data-target="tabs.tab" data-action="click->tabs#change">
<h5 class="tab__heading tab__heading--light">
Heading 2
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="tab__icon"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
</h5>
</div>
<div class="tab tab--light" data-target="tabs.tab" data-action="click->tabs#change">
<h5 class="tab__heading tab__heading--light">
Heading 3
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="tab__icon"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"></path></svg>
</h5>
</div>
</div>
<div class="panel panel--light" data-target="tabs.panel">
<h4 class="panel__heading panel__heading--light">Heading 1</h4>
<p class="panel__content">This is some text in this panel</p>
</div>
<div class="panel panel--light" data-target="tabs.panel">
<h4 class="panel__heading panel__heading--light">Heading 2</h4>
<p class="panel__content">This is some text in this panel</p>
</div>
<div class="panel panel--light" data-target="tabs.panel">
<h4 class="panel__heading panel__heading--light">Heading 3</h4>
<p class="panel__content">This is some text in this panel</p>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="testimonials">
<h2 class="flex items-center mb-4 text-2xl font-bold">Testimonials</h2>
<div class="testimonials">
<div class="testimonial">
<p class="testimonial__content">
“Selfies direct trade swag next level, pickled photo booth vexillologist kombucha subway tile ennui.”
</p>
<div class="testimonial__author">
<img alt="avatar of this author" class="testimonial__author-avatar" src="https://images.unsplash.com/photo-1558898479-33c0057a5d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.5&w=140&h=140&q=80" />
<div class="ml-3">
<p class="testimonial__author-name">Jae Gwozdz</p>
<a class="testimonial__author-link" href="https://twitter.com">@jaegwozdz</a>
</div>
</div>
</div>
<div class="testimonial">
<p class="testimonial__content">
“Semiotics paleo tofu tacos viral shoreditch ennui swag. Retro pok pok hammock woke distillery.”
</p>
<div class="testimonial__author">
<img alt="avatar of this author" class="testimonial__author-avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.5&w=140&h=140&q=80" />
<div class="ml-3">
<p class="testimonial__author-name">Mauricio Summerlin</p>
<a class="testimonial__author-link" href="https://twitter.com">@mauricio</a>
</div>
</div>
</div>
<div class="testimonial">
<p class="testimonial__content">
“Twee cardigan hoodie drinking vinegar, lo-fi mustache bushwick hell of brooklyn etsy.”
</p>
<div class="testimonial__author">
<img alt="avatar of this author" class="testimonial__author-avatar" src="https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.5&w=140&h=140&q=80" />
<div class="ml-3">
<p class="testimonial__author-name">Alita Filkey</p>
<a class="testimonial__author-link" href="https://twitter.com">@alita_f</a>
</div>
</div>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="grid">
<h2 class="flex items-center mb-4 text-2xl font-bold">Grid</h2>
<p class="mb-4">A basic grid can easily be created using <code>flexbox</code></p>
<div class="flex flex-wrap text-center">
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-400">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-200">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-400">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-200">
col
</div>
</div>
<div class="flex flex-wrap text-center">
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-200">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-400">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-200">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/4 p-8 bg-gray-400">
col
</div>
</div>
<div class="flex flex-wrap text-center">
<div class="w-full sm:w-1/2 md:w-1/3 p-8 bg-gray-400">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/3 p-8 bg-gray-200">
col
</div>
<div class="w-full sm:w-1/2 md:w-1/3 p-8 bg-gray-400">
col
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="tables">
<h2 class="flex items-center mb-4 text-2xl font-bold">Tables</h2>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">first</th>
<th scope="col">last</th>
<th scope="col">handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>mathias</td>
<td>inga</td>
<td>mathias@ingamail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>franciska</td>
<td>fleurette</td>
<td>franciska@fleurettemail.com</td>
</tr>
<tr>
<th scope="row">3</th>
<td>kostadin</td>
<td>abeba</td>
<td>kostadin@abebamail.com</td>
</tr>
</tbody>
</table>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="comments">
<h2 class="flex items-center mb-4 text-2xl font-bold">Comments / messages</h2>
<div class="comments">
<div class="comment">
<p class="comment__body">I have a few qualms with this Rails SaaS starter kit. 😛</p>
<div class="comment__author">
<img alt="avatar of this author" class="comment__avatar" src="https://images.unsplash.com/photo-1528054771141-c5accc473a10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.5&w=140&h=140&q=80" />
<p class="comment__author-name">Not Drew H. <span class="comment__datetime">2 days ago</span></p>
</div>
</div>
<div class="comment">
<p class="comment__body">🎵 Out on the wiley, windy moors. We'd roll and fall in green.</p>
<div class="comment__author">
<img alt="avatar of this author" class="comment__avatar" src="https://images.unsplash.com/photo-1495416104162-4ca12f35e8d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.5&w=140&h=140&q=80" />
<p class="comment__author-name">Kate Bush <span class="comment__datetime">4 days ago</span></p>
</div>
</div>
<div class="comment">
<p class="comment__body">🎵 You had a temper like my jealousy. Too hot, too greedy.</p>
<div class="comment__author">
<img alt="avatar of this author" class="comment__avatar" src="https://images.unsplash.com/photo-1495416104162-4ca12f35e8d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.5&w=140&h=140&q=80" />
<p class="comment__author-name">Kate Bush <span class="comment__datetime">4 days ago</span></p>
</div>
</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="flash-messages">
<h2 class="flex items-center mb-0 text-2xl font-bold">Flash messages <span class="ml-2 text-xs font-bold px-3 py-1 rounded-full bg-gray-200 text-gray-700">using Stimulus</span></h2>
<p class="mb-4">Flash messages are a built in function from Rails, communicating action were either successful or not. Sjabloon comes with various (animated) styles you can change to match your needs with ease.</p>
<ul class="">
<li class="flash">I am the default flash message style</li>
</ul>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<ul class="mt-8">
<li class="flash-modern flash-modern--success mb-0">
<span class="flash-modern__badge flash-modern__badge--success">Success</span>
<span class="flash-modern__message flash-modern__message--success">That went really well</span>
</li>
</ul>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<ul class="mt-8">
<li class="flash-modern flash-modern--alert mb-0">
<span class="flash-modern__badge flash-modern__badge--alert">Alert</span>
<span class="flash-modern__message flash-modern__message--alert">Looks like something went wrong</span>
</li>
</ul>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<ul class=" mt-8" data-controller="flash" data-target="flash.wrapper">
<li class="flash-traditional flash-traditional--success mb-0">
<strong class="flash-traditional__badge">Success!</strong>
<span class="flash-traditional__message">Houston, we have lift off.</span>
<span class="flash-traditional__close" data-action="click->flash#close">
<svg class="fill-current h-6" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</li>
</ul>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<ul class=" mt-8" data-controller="flash" data-target="flash.wrapper">
<li class="flash-traditional flash-traditional--alert">
<strong class="flash-traditional__badge flash-traditional__badge--alert">Alert!</strong>
<span class="flash-traditional__message flash-traditional__message--alert">Houston, we have a problem…</span>
<span class="flash-traditional__close" data-action="click->flash#close">
<svg class="fill-current h-6" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</li>
</ul>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="pagination">
<h2 class="flex items-center mb-4 text-2xl font-bold">Pagination</h2>
<div class="pagination">
<a href="#" class="pagination-item"><svg class="w-3 h-3 fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg></a>
<a href="#" class="pagination-item">1</a>
<a href="#" class="pagination-item">2</a>
<a href="#" class="pagination-item pagination-item--active">3</a>
<a href="#" class="pagination-item pagination-item--disabled">…</a>
<a href="#" class="pagination-item">28</a>
<a href="#" class="pagination-item">29</a>
<a href="#" class="pagination-item">30</a>
<a href="#" class="pagination-item"><svg class="w-3 h-3 fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg></a>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<div class="pagination mt-6">
<a href="#" class="pagination-item pagination-item--rounded"><svg class="w-3 h-3 fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg></a>
<a href="#" class="pagination-item pagination-item--rounded">1</a>
<a href="#" class="pagination-item pagination-item--rounded">2</a>
<a href="#" class="pagination-item pagination-item--rounded pagination-item--active">3</a>
<a href="#" class="pagination-item pagination-item--rounded pagination-item--disabled">…</a>
<a href="#" class="pagination-item pagination-item--rounded">28</a>
<a href="#" class="pagination-item pagination-item--rounded">29</a>
<a href="#" class="pagination-item pagination-item--rounded">30</a>
<a href="#" class="pagination-item pagination-item--rounded"><svg class="w-3 h-3 fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg></a>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="progress-bars">
<h2 class="flex items-center mb-4 text-2xl font-bold">Progress bars</h2>
<div class="progress-bar-wrapper mt-8">
<div class="progress-bar" style="width: 35%"></div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">Progress bar with amount</h3>
<div class="progress-bar-wrapper">
<div class="progress-bar" style="width: 75%">75%</div>
</div>
<div class="mt-4" data-controller="toggle">
<span class="flex items-center text-sm text-gray-700 cursor-pointer">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="inline-block w-4 h-4 mr-1 fill-current">
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="icon-shape">
<path d="M19.8005808,10 C17.9798698,6.43832409 14.2746855,4 10,4 C5.72531453,4 2.02013017,6.43832409 0.199419187,10 C2.02013017,13.5616759 5.72531453,16 10,16 C14.2746855,16 17.9798698,13.5616759 19.8005808,10 Z M10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 Z M10,12 C11.1045695,12 12,11.1045695 12,10 C12,8.8954305 11.1045695,8 10,8 C8.8954305,8 8,8.8954305 8,10 C8,11.1045695 8.8954305,12 10,12 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
View source
<span class="inline-block ml-2 text-xs font-bold text-gray-500">license needed</span>
</span></div>
</div>
<div class="border-b pb-8 mb-8" id="animations">
<h2 class="flex items-center mb-4 text-2xl font-bold">Animations</h2>
<p class="mb-4">Sjabloon comes with various little animations you can add dynamically (eg. Javascript), on <code>:hover</code>, or on <code>:focus</code>. These animations can add just that little bit extra to an otherwise static UI/UX.</p>
<div class="flex flex-col sm:flex-row">
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">Slide Up <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="slideUpOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">Slide Down <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="slideDownOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
</div>
<div class="flex flex-col sm:flex-row">
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">Slide Left <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="slideLeftOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">Slide Right <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="slideRightOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
</div>
<div class="flex flex-col sm:flex-row">
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">FadeIn <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="fadeInOnHover opacity-0 block w-12 h-12 bg-gray-500 rounded"></span>
</div>
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">FadeOut <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="fadeOutOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
</div>
<div class="flex flex-col sm:flex-row">
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">ZoomIn <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="zoomInOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">ZoomOut <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="zoomOutOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
</div>
<div class="flex flex-col sm:flex-row">
<div class="w-full sm:w-1/2">
<h3 class="mt-8 flex items-center mb-4 text-xl font-bold">Heartbeat <span class="inline-block ml-2 text-sm font-medium text-gray-600">hover for preview</span></h3>
<span class="heartbeatOnHover block w-12 h-12 bg-gray-500 rounded"></span>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center p-4 mt-4 sm:mt-8 sm:p-16">
<h3 class="text-3xl font-semibold leading-tight text-center text-gray-700">
A Rails SaaS starter kit to build successful products
</h3>
</div>
</div>
</div>
<footer class="footer-wrapper">
</footer>
<script async defer data-domain="getsjabloon.com" src="https://plausible.io/js/plausible.js"></script>
</body>
</html>