Skip to content

Instantly share code, notes, and snippets.

@MintayRibkins

MintayRibkins/component.tw.html

Created December 23, 2020 23:21
Show Gist options
  • Save MintayRibkins/876769a81be75b28684378b765146f77 to your computer and use it in GitHub Desktop.
Save MintayRibkins/876769a81be75b28684378b765146f77 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind checkout
Raw
component.tw.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://tailwindcomponents.com/css/component.ecommerce-checkout.css" rel="stylesheet">
<title>Корзина</title>
</head>
<body class="bg-white" style="color: #525252">
<div class="container mx-auto sm:px-4">
<div class="py-5 text-center">
<img class="block mx-auto mb-4" src="logo.png" alt="" width="137" height="126">
<h2>Корзина</h2>
</div>
<div class="flex flex-wrap">
<!-- <step1>-->
<div class="pr-4 pl-4 mb-4 md:w-1/2 lg:w-full sm:w-full">
<ul class="flex flex-col pl-0 mb-0 border rounded border-gray-300 mb-3">
<li>
<div class="flex justify-center lg:justify-end">
<div class="border rounded-md w-full px-4 py-3">
<div class="flex items-center justify-between">
<h3 class="text-gray-700 font-medium">Товары в корзине</h3>
<span class="text-gray-600 text-sm">Edit</span>
<span class="inline-block p-1 text-center font-semibold text-sm align-baseline leading-none rounded bg-gray-600 text-white hover:bg-gray-700 rounded-full py-1 px-3">3</span>
</div>
</div>
</div>
</li>
<li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between lh-condensed">
<div>
<small class="text-gray-700">Код товара: 111-898</small>
<h6 class="my-0">Пижама мужская Cocoon</h6>
<small class="text-gray-700">Размер: S</small>
</div>
<div>
<div class="flex justify-between">
<div class="flex">
<img class="h-20 w-20 object-cover rounded" src="./img/product1.jpeg" alt="">
</div>
</div>
</div>
</li>
<li>
<label for="counter"
class="w-full text-gray-700 text-sm font-semibold">Кол-во:</label>
<div class="flex flex-row h-10 w-full rounded-lg relative bg-transparent mt-1">
<button data-action="decrement"
class="bg-gray-300 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-l cursor-pointer outline-none">
<span class="m-auto text-2xl font-thin">−</span>
</button>
<input id="counter" type="number" style="-webkit-appearance: none; -moz-appearance: textfield;"
class="outline-none focus:outline-none text-center w-full bg-gray-300 font-semibold text-md hover:text-black focus:text-black md:text-basecursor-default flex items-center text-gray-700 outline-none"
name="custom-input-number" value="0"/>
<button data-action="increment"
class="bg-gray-300 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-r cursor-pointer">
<span class="m-auto text-2xl font-thin">+</span>
</button>
</div>
</li>
<!-- <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between lh-condensed">-->
<!-- <div>-->
<!-- <h6 class="my-0">Second product</h6>-->
<!-- <small class="text-gray-700">Brief description</small>-->
<!-- </div>-->
<!-- <span class="text-gray-700">$8</span>-->
<!-- </li>-->
<!-- <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between lh-condensed">-->
<!-- <div>-->
<!-- <h6 class="my-0">Third item</h6>-->
<!-- <small class="text-gray-700">Brief description</small>-->
<!-- </div>-->
<!-- <span class="text-gray-700">$5</span>-->
<!-- </li>-->
<li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between bg-gray-100">
<div class="text-green-500">
<h6 class="my-0">Промо код</h6>
<small>LETO1050</small>
</div>
<span class="text-green-500">-5%</span>
</li>
<li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between">
<span>Сумма к оплате:</span>
<strong>2000</strong>
</li>
</ul>
<form class="relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300 p-2 shadow-xl">
<div class="relative flex items-stretch w-full">
<input type="text"
class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
placeholder="промо код">
<div class="input-group-append">
<button style="background: #fd79cc" type="submit"
class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline text-white hover:bg-gray-700">
активировать
</button>
</div>
</div>
</form>
</div>
<!-- </main step>-->
<!-- <step4>-->
<div class="md:w-1/2 lg:w-1/3 sm:w-full pr-4 pl-4 mb-4">
<form class="max-w-xl m-4 p-10 bg-white shadow-xl">
<p class="text-gray-800 font-medium">Контактные данные</p>
<div class="">
<label class="block text-sm text-gray-00" for="cus_name">Имя</label>
<input class="w-full px-5 py-1 text-gray-900 bg-gray-100 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Имя" aria-label="Name">
</div>
<div class="mt-2">
<label class="block text-sm text-gray-600" for="cus_email">Email</label>
<input class="w-full px-5 py-4 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Your Email" aria-label="Email">
</div>
<div class="mt-2">
<label class=" block text-sm text-gray-600" for="cus_email">Адресс</label>
<input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Street" aria-label="Email">
</div>
<div class="mt-2">
<label class="hidden text-sm block text-gray-600" for="cus_email">Город</label>
<input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="City" aria-label="Email">
</div>
<div class="inline-block mt-2 w-1/2 pr-1">
<label class="hidden block text-sm text-gray-600" for="cus_email">Country</label>
<input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Country" aria-label="Email">
</div>
<div class="inline-block mt-2 -mx-1 pl-1 w-1/2">
<label class="hidden block text-sm text-gray-600" for="cus_email">Zip</label>
<input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Zip" aria-label="Email">
</div>
</form>
</div>
<!-- </step1>-->
<!-- <step2>-->
<div class="md:w-1/2 lg:w-1/3 sm:w-full pr-4 pl-4 mb-4">
<form class="mt-8 w-full shadow-xl">
<h4 class="text-sm text-gray-500 font-medium">Методы Доставки</h4>
<div class="mt-6">
<button class="flex items-center justify-between w-full bg-white rounded-md border-2 border-blue-500 p-4 focus:outline-none">
<label class="flex items-center">
<input type="radio" class="form-radio h-5 w-5 text-blue-600" checked><span
class="ml-2 text-sm text-gray-700">Новая почта</span>
</label>
<span class="text-gray-600 text-sm">бесплатно</span>
</button>
<button class="mt-6 flex items-center justify-between w-full bg-white rounded-md border p-4 focus:outline-none">
<label class="flex items-center">
<input type="radio" class="form-radio h-5 w-5 text-blue-600"><span
class="ml-2 text-sm text-gray-700">DC Delivery</span>
</label>
<span class="text-gray-600 text-sm">$26</span>
</button>
</div>
</form>
</div>
<!-- </step2>-->
<!-- <step3>-->
<div class="md:w-1/2 lg:w-1/3 sm:w-full pr-4 pl-4 mb-4">
<form class="mt-8 w-full shadow-xl">
<h4 class="text-sm text-gray-500 font-medium">Методы оплаты</h4>
<div class="mt-6">
<button class="flex items-center justify-between w-full bg-white rounded-md border-2 border-blue-500 p-4 focus:outline-none">
<label class="flex items-center">
<input type="radio" class="form-radio h-5 w-5 text-blue-600" checked><span
class="ml-2 text-sm text-gray-700">Новая почта</span>
</label>
<span class="text-gray-600 text-sm">бесплатно</span>
</button>
<button class="mt-6 flex items-center justify-between w-full bg-white rounded-md border p-4 focus:outline-none">
<label class="flex items-center">
<input type="radio" class="form-radio h-5 w-5 text-blue-600"><span
class="ml-2 text-sm text-gray-700">DC Delivery</span>
</label>
<span class="text-gray-600 text-sm">$26</span>
</button>
</div>
<p class="mt-4 text-gray-800 font-medium text-center">Информация об оплате</p>
<div class="">
<label class="block text-sm text-gray-600" for="cus_name">Card</label>
<input class="w-full px-2 py-2 text-gray-700 bg-gray-100 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Card Number MM/YY CVC" aria-label="Name">
</div>
</form>
</div>
<!-- </step3>-->
<div>
<hr>
</div>
<!-- <div class="md:w-2/3 pr-4 pl-4 md:order-1">-->
<!-- <h4 class="mb-3">Адресс доставки</h4>-->
<!-- <form class="needs-validation" novalidate>-->
<!-- <div class="flex flex-wrap ">-->
<!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">-->
<!-- <label for="firstName">First name</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="firstName" placeholder="" value="" required>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Valid first name is required.-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">-->
<!-- <label for="lastName">Last name</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="lastName" placeholder="" value="" required>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Valid last name is required.-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="mb-3">-->
<!-- <label for="username">Username</label>-->
<!-- <div class="relative flex items-stretch w-full">-->
<!-- <div class="input-group-prepend">-->
<!-- <span class="input-group-text">@</span>-->
<!-- </div>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="username" placeholder="Username" required>-->
<!-- <div class="hidden mt-1 text-sm text-red" style="width: 100%;">-->
<!-- Your username is required.-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="mb-3">-->
<!-- <label for="email">Email <span class="text-gray-700">(Optional)</span></label>-->
<!-- <input type="email" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="email" placeholder="[email protected]">-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Please enter a valid email address for shipping updates.-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="mb-3">-->
<!-- <label for="address">Address</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="address" placeholder="1234 Main St" required>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Please enter your shipping address.-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="mb-3">-->
<!-- <label for="address2">Address 2 <span class="text-gray-700">(Optional)</span></label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="address2" placeholder="Apartment or suite">-->
<!-- </div>-->
<!-- <div class="flex flex-wrap ">-->
<!-- <div class="md:w-2/5 pr-4 pl-4 mb-3">-->
<!-- <label for="country">Country</label>-->
<!-- <select class="custom-select block w-full" id="country" required>-->
<!-- <option value="">Choose...</option>-->
<!-- <option>United States</option>-->
<!-- </select>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Please select a valid country.-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="md:w-1/3 pr-4 pl-4 mb-3">-->
<!-- <label for="state">State</label>-->
<!-- <select class="custom-select block w-full" id="state" required>-->
<!-- <option value="">Choose...</option>-->
<!-- <option>California</option>-->
<!-- </select>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Please provide a valid state.-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="md:w-1/4 pr-4 pl-4 mb-3">-->
<!-- <label for="zip">Zip</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="zip" placeholder="" required>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Zip code required.-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <hr class="mb-4">-->
<!-- <div class="custom-control custom-checkbox">-->
<!-- <input type="checkbox" class="custom-control-input" id="same-address">-->
<!-- <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>-->
<!-- </div>-->
<!-- <div class="custom-control custom-checkbox">-->
<!-- <input type="checkbox" class="custom-control-input" id="save-info">-->
<!-- <label class="custom-control-label" for="save-info">Save this information for next time</label>-->
<!-- </div>-->
<!-- <hr class="mb-4">-->
<!-- <h4 class="mb-3">Payment</h4>-->
<!-- <div class="block my-3">-->
<!-- <div class="custom-control custom-radio">-->
<!-- <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>-->
<!-- <label class="custom-control-label" for="credit">Credit card</label>-->
<!-- </div>-->
<!-- <div class="custom-control custom-radio">-->
<!-- <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>-->
<!-- <label class="custom-control-label" for="debit">Debit card</label>-->
<!-- </div>-->
<!-- <div class="custom-control custom-radio">-->
<!-- <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>-->
<!-- <label class="custom-control-label" for="paypal">Paypal</label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="flex flex-wrap ">-->
<!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">-->
<!-- <label for="cc-name">Name on card</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-name" placeholder="" required>-->
<!-- <small class="text-gray-700">Full name as displayed on card</small>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Name on card is required-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">-->
<!-- <label for="cc-number">Credit card number</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-number" placeholder="" required>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Credit card number is required-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="flex flex-wrap ">-->
<!-- <div class="md:w-1/4 pr-4 pl-4 mb-3">-->
<!-- <label for="cc-expiration">Expiration</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-expiration" placeholder="" required>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Expiration date required-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="md:w-1/4 pr-4 pl-4 mb-3">-->
<!-- <label for="cc-expiration">CVV</label>-->
<!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-cvv" placeholder="" required>-->
<!-- <div class="hidden mt-1 text-sm text-red">-->
<!-- Security code required-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <hr class="mb-4">-->
<!-- <button class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded no-underline bg-blue-600 text-white hover:bg-blue-600 py-3 px-4 leading-tight text-xl block w-full" type="submit">Continue to checkout</button>-->
<!-- </form>-->
<!-- </div>-->
</div>
<!-- <footer class="my-5 pt-5 text-gray-700 text-center text-small">-->
<!-- <p class="mb-1">&copy; 2017-2018 Company Name</p>-->
<!-- <ul class="list-inline">-->
<!-- <li class="list-inline-item"><a href="#">Privacy</a></li>-->
<!-- <li class="list-inline-item"><a href="#">Terms</a></li>-->
<!-- <li class="list-inline-item"><a href="#">Support</a></li>-->
<!-- </ul>-->
<!-- </footer>-->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script>
function decrement(e) {
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
value--;
target.value = value;
}
function increment(e) {
const btn = e.target.parentNode.parentElement.querySelector(
'button[data-action="decrement"]'
);
const target = btn.nextElementSibling;
let value = Number(target.value);
value++;
target.value = value;
}
const decrementButtons = document.querySelectorAll(
`button[data-action="decrement"]`
);
const incrementButtons = document.querySelectorAll(
`button[data-action="increment"]`
);
decrementButtons.forEach(btn => {
btn.addEventListener("click", decrement);
});
incrementButtons.forEach(btn => {
btn.addEventListener("click", increment);
});
</script>
</body>
<style>
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
-moz-appearance: textfield;
}
.custom-number-input input:focus {
outline: none !important;
-moz-appearance: textfield;
}
.custom-number-input button:focus {
outline: none !important;
-moz-appearance: textfield;
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment