<section class="section py-20-desktop is-clipped is-relative">
<div class="container">
<div class="columns is-align-items-center is-justify-content-space-between">
<div class="column is-5 is-4-desktop is-5-widescreen mb-12 mb-0-tablet">
<div class="pr-5-widescreen">
<small class="mb-2 is-block has-text-grey-darker is-uppercase has-text-weight-semibold">
<span>Create an</span>
<span class="has-text-primary">account</span>
</small>
<h2 class="title has-mw-xs">Join our community</h2>
<div class="field mb-4">
<label class="label"><small>E-mail address</small></label>
<div class="control">
<input class="input" type="text" placeholder="Type e-mail">
</div>
</div>
<div class="field mb-4">
<label class="label"><small>Password</small></label>
<div class="control">
<input class="input" type="password" placeholder="Type password">
</div>
</div>
<div class="field mb-4">
<label class="label mb-2"><small>Repeat password</small></label>
<div class="control">
<input class="input" type="password" placeholder="Repeat password">
</div>
</div>
<label class="is-flex mb-6 checkbox">
<input class="mr-4" style="width: 20px; height: 20px;" type="checkbox">
<small>
<span>By signing up, you agree to our</span>
<a class="has-text-weight-medium has-text-grey-darker" href="#">Terms, Data Policy</a><a class="has-text-weight-medium has-text-grey-darker" href="#">and Cookies Policy.</a>
</small>
</label>
<div class="control has-text-right">
<button class="button is-primary is-fullwidth">Get started</button>
</div>
</div>
</div>
<div class="column is-narrow-desktop is-relative py-0 is-hidden-desktop is-clipped">
<div class="is-absolute is-bottom-0 p-8-mobile p-14-tablet p-20-desktop" style="z-index: 1;">
<h2 class="title has-text-white mb-4 has-mw-sm">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="subtitle has-text-white is-hidden-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
<img class="image ml-auto-tablet" src="acros-assets/images/forms/work.jpg" alt="">
</div>
</div>
</div>
<div class="is-absolute is-top-0 is-right-0 is-hidden-touch">
<div class="is-absolute is-bottom-0 p-8-mobile p-14-tablet p-20-desktop" style="z-index: 1;">
<h2 class="title has-text-white mb-4 has-mw-sm">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="subtitle has-text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
<img class="image ml-auto-tablet" src="acros-assets/images/forms/work.jpg" alt="">
</div>
</section>Framework
All Frameworks
UI Library
Acros UI Components by Shuffle
Choose from 177 of ready-made UI components available in Shuffle Editor.
By subscribing to the editor, you get access to all of them.
The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.
Component #1
