Supascribe form

supascribe-widget.html

<div data-supascribe-embed-id="870199247591" data-supascribe-subscribe="">
<style>.custom-substack-widget,
    .custom-substack-widget+*{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}
    .custom-substack-widget svg{display:block;vertical-align:middle}
    .supascribe-widget .visible{visibility:visible}
    .supascribe-widget .static{position:static}
    .supascribe-widget .mx-auto{margin-left:auto;margin-right:auto}
    .supascribe-widget .mb-4{margin-bottom:16px}
    .supascribe-widget .mb-8{margin-bottom:32px}
    .supascribe-widget .mr-1{margin-right:4px}
    .supascribe-widget .mr-2{margin-right:8px}
    .supascribe-widget .mt-4{margin-top:16px}
    .supascribe-widget .box-border{box-sizing:border-box}
    .supascribe-widget .line-clamp-3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
    .supascribe-widget .inline{display:inline}
    .supascribe-widget .flex{display:flex}
    .supascribe-widget .hidden{display:none}
    .supascribe-widget .h-20{height:80px}
    .supascribe-widget .h-5{height:20px}
    .supascribe-widget .h-6{height:24px}
    .supascribe-widget .w-20{width:80px}
    .supascribe-widget .w-5{width:20px}
    .supascribe-widget .w-full{width:100%}
    .supascribe-widget .flex-1{flex:1 1 0%}@keyframes spin{to{transform:rotate(1turn)}}
    .supascribe-widget .animate-spin{animation:spin 1s linear infinite}
    .supascribe-widget .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}
    .supascribe-widget .flex-row{flex-direction:row}
    .supascribe-widget .flex-row-reverse{flex-direction:row-reverse}
    .supascribe-widget .flex-col{flex-direction:column}
    .supascribe-widget .flex-wrap{flex-wrap:wrap}
    .supascribe-widget .flex-nowrap{flex-wrap:nowrap}
    .supascribe-widget .items-center{align-items:center}
    .supascribe-widget .gap-1{gap:4px}
    .supascribe-widget .gap-4{gap:16px}
    .supascribe-widget :is(.space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-left:calc(8px*(1 - var(--tw-space-x-reverse)));margin-right:calc(8px*var(--tw-space-x-reverse))}
    .supascribe-widget :is(.space-y-12>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-bottom:calc(48px*var(--tw-space-y-reverse));margin-top:calc(48px*(1 - var(--tw-space-y-reverse)))}
    .supascribe-widget .text-ellipsis{text-overflow:ellipsis}
    .supascribe-widget .whitespace-nowrap{white-space:nowrap}
    .supascribe-widget .rounded{border-radius:4px}
    .supascribe-widget .rounded-lg{border-radius:8px}
    .supascribe-widget .border{border-width:1px}
    .supascribe-widget .bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}
    .supascribe-widget .bg-current{background-color:currentColor}
    .supascribe-widget .bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}
    .supascribe-widget .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}
    .supascribe-widget .bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}
    .supascribe-widget .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}
    .supascribe-widget .bg-cover{background-size:cover}
    .supascribe-widget .bg-center{background-position:50%}
    .supascribe-widget .bg-no-repeat{background-repeat:no-repeat}
    .supascribe-widget .p-1{padding:4px}
    .supascribe-widget .p-2{padding:8px}
    .supascribe-widget .p-6{padding:24px}
    .supascribe-widget .px-3{padding-left:12px;padding-right:12px}
    .supascribe-widget .px-4{padding-left:16px;padding-right:16px}
    .supascribe-widget .py-2{padding-bottom:8px;padding-top:8px}
    .supascribe-widget .py-3{padding-bottom:12px;padding-top:12px}
    .supascribe-widget .py-8{padding-bottom:32px;padding-top:32px}
    .supascribe-widget .pb-\[56\.25\%\]{padding-bottom:56.25%}
    .supascribe-widget .font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}
    .supascribe-widget .text-2xl{font-size:24px;line-height:32px}
    .supascribe-widget .text-3xl{font-size:30px;line-height:36px}
    .supascribe-widget .text-lg{font-size:18px;line-height:28px}
    .supascribe-widget .text-xs{font-size:12px;line-height:16px}
    .supascribe-widget .font-bold{font-weight:700}
    .supascribe-widget .font-light{font-weight:300}
    .supascribe-widget .font-semibold{font-weight:600}
    .supascribe-widget .uppercase{text-transform:uppercase}
    .supascribe-widget .leading-6{line-height:24px}
    .supascribe-widget .tracking-wider{letter-spacing:.05em}
    .supascribe-widget .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}
    .supascribe-widget .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
    .supascribe-widget .opacity-25{opacity:.25}
    .supascribe-widget .shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
    .csw-theme-default{--csw-primary-color:#000;--csw-input-color:#fff;--csw-text-color:#fff;--csw-input-text-color:#000}
    .custom-substack-widget{border-width:2px;border:2px solid var(--csw-primary-color);border-radius:.5rem;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:wrap;font-size:1rem;height:auto;max-width:384px;overflow:hidden;padding:0;width:100%}
    .custom-substack-widget .csw-container{width:100%}@media (min-width:640px){.custom-substack-widget .csw-container{margin-left:auto;margin-right:auto}}
    .custom-substack-widget .csw-container>:first-child{width:100%}
    .custom-substack-widget .csw-container>:last-child{flex:1 1 0%}
    .custom-substack-widget.csw-layout-row .csw-container{display:flex;flex-wrap:wrap}
    .custom-substack-widget.csw-layout-row .csw-container>:first-child{flex:1 1 170px;flex-shrink:1;min-width:0}
    .custom-substack-widget.csw-layout-column .csw-container{display:flex;flex-direction:column}
    .custom-substack-widget.csw-layout-column .csw-container input{text-align:center}
    .custom-substack-widget.csw-layout-column{border-width:0}
    .custom-substack-widget.csw-layout-column .csw-container>:first-child input{border:2px solid var(--csw-primary-color);border-radius:6px}
    .custom-substack-widget.csw-layout-column .csw-container>:last-child{margin-top:8px}
    .custom-substack-widget.csw-layout-column .csw-container>:last-child button{border:2px solid var(--csw-primary-color);border-radius:6px}
    .custom-substack-widget button{background-color:var(--csw-primary-color);color:var(--csw-text-color);cursor:pointer;font-size:14px;font-weight:600;height:100%;justify-content:center;line-height:20px;padding:10px 16px;position:relative;white-space:nowrap}
    .custom-substack-widget button,.custom-substack-widget input{border-style:none;display:block;margin:0;outline:2px solid transparent;outline-offset:2px;width:100%}
    .custom-substack-widget input{background-color:var(--csw-input-color);box-sizing:border-box;color:var(--csw-input-text-color);font-size:16px;height:auto;line-height:24px;padding:10px 12px 10px 16px}
    .csw-theme-custom input::-moz-placeholder,.csw-theme-default input::-moz-placeholder{color:var(--csw-input-text-color)!important;opacity:.8!important}
    .csw-theme-custom input::placeholder,.csw-theme-default input::placeholder{color:var(--csw-input-text-color)!important;opacity:.8!important}
    .custom-substack-widget+.success{color:#059669;margin:.5rem 0 0}
    .custom-substack-widget+.error{color:#dc2626;margin:.5rem 0 0}
    .csw-theme-green,.csw-theme-orange,.csw-theme-purple{border-style:none;padding:2px;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
    .csw-theme-green input,.csw-theme-orange input,.csw-theme-purple input{border-radius:4px 0 0 4px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}
    .csw-theme-green input::-moz-placeholder,.csw-theme-orange input::-moz-placeholder,.csw-theme-purple input::-moz-placeholder{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));opacity:.8}
    .csw-theme-green input::placeholder,.csw-theme-orange input::placeholder,.csw-theme-purple input::placeholder{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));opacity:.8}
    .csw-theme-orange{--start-color:#ff4d4d;--end-color:#f9cb28}
    .csw-theme-orange,.csw-theme-purple{background:linear-gradient(140deg,var(--start-color),var(--end-color))}
    .csw-theme-purple{--start-color:#00f3fc;--end-color:#ff00fd}
    .csw-theme-green{--start-color:#00c9ff;--end-color:#21d14e}
    .csw-theme-green,.csw-theme-sub{background:linear-gradient(140deg,var(--start-color),var(--end-color))}
    .csw-theme-sub{--start-color:#00f3fc;--end-color:#ff00fd}
    .custom-substack-widget .padding-2px{padding:2px}
    .supascribe-widget .hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}
    .supascribe-widget .hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}@media (min-width:640px){.supascribe-widget .sm\:px-4{padding-left:16px;padding-right:16px}}@media (min-width:768px){.supascribe-widget .md\:h-\[100px\]{height:100px}
    .supascribe-widget .md\:w-\[130px\]{width:130px}}@media (min-width:1024px){.supascribe-widget .lg\:h-\[124px\]{height:124px}
    .supascribe-widget .lg\:w-\[164px\]{width:164px}}</style>
<form class="supascribe-widget custom-substack-widget csw-theme-orange csw-layout-row">
<div class="csw-container">
<div>
<input type="email" placeholder="Enter your email">
</div>
<div>
<button type="submit">Subscribe</button>
</div>
</div>
</form>
</div>