Form Single
Component 1
Sign in
<div class="login-template">
<div class="container">
<div class="login-form ml-lg-4">
<h2 class="mb-3 h1">Sign in</h2>
<form class="pt-2">
<div class="mb-4">
<label class="form-label form-label-lg">Username</label>
<input type="text" class="form-control form-control-lg" value="fabrxdesign">
</div>
<div class="mb-4">
<label class="form-label form-label-lg">Password</label>
<input type="password" class="form-control form-control-lg" value="••••••••••••••••">
</div>
<button type="button" class="btn btn-xl btn-block btn-primary">Sign in</button>
<div class="mt-4 d-flex">
<div class="form-check form-check-sm mb-0">
<input class="form-check-input mt-1" type="checkbox" id="gridCheck">
<label class="form-check-label text-gray-600" for="gridCheck">
Remember me
</label>
</div>
<a href="#" class="small text-gray-600 ml-auto mt-1">Forgot password?</a>
</div>
</form>
</div>
</div>
</div>
Component 2
<div class="login-simple-template bg-gray-100">
<div class="container">
<div class="row align-items-center vh-100">
<div class="col-md-10 col-lg-6 m-auto py-4 py-md-5">
<div class="bg-white rounded-12 shadow-dark-80 py-4 py-md-5 px-md-4 px-3">
<h1 class="mb-md-3 mb-0 text-center">Sign in</h1>
<div class="d-flex flex-wrap justify-content-center align-items-center my-md-3 my-2 pt-md-2 pt-sm-1 px-xl-4 social-login">
<a href="#" class="text-gray-600 border rounded px-sm-4 py-2 d-flex align-items-center justify-content-center">
<img src="../assets/img/pages/google-icon.svg" alt="Google">
<span class="fs-12 pl-2 py-1 lh-sm">Login with Google</span>
</a>
<a href="#" class="text-gray-600 border rounded px-sm-4 py-2 d-flex align-items-center justify-content-center">
<img src="../assets/img/pages/facebook-brands.svg" alt="Google">
<span class="fs-12 pl-2 py-1 lh-sm">Login with Facebook</span>
</a>
</div>
<form class="p-2">
<div class="mb-4">
<label class="form-label form-label-lg">Username</label>
<input type="text" class="form-control form-control-lg" value="fabrxdesign">
</div>
<div class="mb-4">
<label class="form-label form-label-lg">Password</label>
<input type="password" class="form-control form-control-lg" value="••••••••••••••••">
</div>
<button type="button" class="btn btn-xl btn-block btn-primary">Sign in</button>
<div class="mt-4 d-flex">
<div class="form-check form-check-sm d-flex align-items-center mb-0">
<input class="form-check-input" type="checkbox" id="gridCheck2">
<label class="form-check-label text-gray-600" for="gridCheck2">
Remember me
</label>
</div>
<a href="#" class="small text-gray-600 ml-auto mt-1">Forgot password?</a>
</div>
</form>
<div class="text-center pt-2 pt-md-5 pb-md-2">
<p class="mb-0">Don't have an account yet? <a href="#" class="text-secondary font-weight-bold">Sign up</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
Component 3
You think you got what it takes?
<div class="job-opening-template">
<div class="container">
<section class="muse-section">
<div class="row align-items-center">
<div class="col-md-12">
<h4 class="mb-4">You think you got what it takes?</h4>
</div>
<div class="col-md-12">
<div class="card border-gray-200 rounded-12 shadow-dark-80 p-4 p-md-5">
<form>
<div class="row">
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Full Name</label>
<input type="text" class="form-control form-control-xl" placeholder="Full name">
</div>
</div>
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Email</label>
<input type="text" class="form-control form-control-xl" placeholder="muse@fabrx.co">
</div>
</div>
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Cover letter</label>
<div class="form-file form-file-xl">
<input type="file" class="form-file-input" id="customFileXl1">
<label class="form-file-label" for="customFileXl1">
<span class="form-file-text">Choose file</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Resume</label>
<div class="form-file form-file-xl">
<input type="file" class="form-file-input" id="customFileXl">
<label class="form-file-label" for="customFileXl">
<span class="form-file-text">Choose file</span>
<span class="form-file-button btn-primary">Browse</span>
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Tell us why you’d like to join Fabrx Design</label>
<textarea class="form-control form-control-xl" placeholder="Start typing" rows="4"></textarea>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-7">
<p class="mb-4 mt-md-4">We will never share your submitted data</p>
</div>
<div class="col-md-5 text-md-right">
<button type="button" class="btn btn-xl btn-primary">Apply</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
Component 4
Send a message
Get in touch and a team of highly trained ninjas will get back to you
<div class="contact-template">
<div class="container">
<section class="muse-section py-4 py-md-5">
<div class="row align-items-center">
<div class="col-md-12 mb-md-4">
<h4 class="mb-1 h1">Send a message</h4>
<p class="big lh-lg">Get in touch and a team of highly trained ninjas will get back to you</p>
</div>
<div class="col-md-12">
<div class="card border-gray-200 rounded-12 shadow-dark-80 p-4 p-md-5">
<form>
<div class="row">
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Full Name</label>
<input type="text" class="form-control form-control-xl" placeholder="Full name">
</div>
</div>
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Email</label>
<input type="text" class="form-control form-control-xl" placeholder="muse@fabrx.co">
</div>
</div>
<div class="col-md-12">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Cover letter</label>
<select class="form-select form-select-xl">
<option>Choose</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Message</label>
<textarea class="form-control form-control-xl" placeholder="Start typing" rows="4"></textarea>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-7">
<div class="form-check mb-4 mt-md-4">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label pl-1" for="flexCheckIndeterminate">
Subscribe to our newsletter
</label>
</div>
</div>
<div class="col-md-5 text-md-right">
<button type="button" class="btn btn-xl btn-primary">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
Component 5
Can’t find what you’re looking for?
Reach out to our support team and we’ll get back to you within 24
hours for any issue you might have!
<div class="bg-gray-100 help-center-template">
<div class="container">
<section class="muse-section pt-0 pt-sm-5">
<div class="text-center">
<h2>Can’t find what you’re looking for?</h2>
<p class="big lh-lg">Reach out to our support team and we’ll get back to you within 24 <br class="d-none d-md-block">hours for any issue you might have!</p>
</div>
<div class="bg-white p-4 p-md-5 rounded-12 shadow-dark-80 mt-4 mt-mb-5">
<form>
<div class="row">
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Full name</label>
<input type="text" placeholder="Full name" class="form-control form-control-xl">
</div>
</div>
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Email address</label>
<input type="text" placeholder="Email address" class="form-control form-control-xl">
</div>
</div>
<div class="col-md-12">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Department</label>
<select class="form-select form-select-xl">
<option>Choose</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Message</label>
<textarea class="form-control form-control-lg" placeholder="Start typing" rows="4"></textarea>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-7">
<div class="form-check mt-md-4 mb-4">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="">
<label class="form-check-label" for="flexCheckChecked">Subscribe to our newsletter</label>
</div>
</div>
<div class="col-md-5">
<div class="text-right"><button type="button" class="btn btn-xl btn-primary">Submit</button></div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
Component 6
Leave a comment
<div class="blog-post-template bg-gray-100">
<div class="container">
<section class="muse-section py-4 py-md-5">
<h2 class="mb-4 mb-md-5">Leave a comment</h2>
<div class="rounded-12 shadow-dark-80 bg-white p-4 p-md-5">
<form>
<div class="row">
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Full name</label>
<input type="text" class="form-control form-control-xl" placeholder="Full name">
</div>
</div>
<div class="col-md-6">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Email</label>
<input type="text" class="form-control form-control-xl" placeholder="muse@fabrx.co">
</div>
</div>
<div class="col-md-12">
<div class="mb-4 mb-md-5">
<label class="form-label form-label-lg">Comment</label>
<textarea class="form-control form-control-xl" rows="6" placeholder="Start typing"></textarea>
</div>
</div>
<div class="col-md-12 pt-0 pt-md-3 text-right mb-2">
<button class="btn btn-xl btn-primary text-uppercase px-4 fs-16">Post</button>
</div>
</div>
</form>
</div>
</section>
</div>
</div>