Tailwinds Ticket Template

1<div class="flex flex-col gap-2 md:gap-6 mx-auto transition-opacity pb-[200px] min-w-[320px]"><p class="mx-auto mt-[5vh] max-w-xs md:max-w-none"><a href="https://www.builder.io/" target="_blank"><!--qv --><img alt="Builder.io logo" class="inline-block !object-contain max-w-[25vw]" sizes="(min-width: 768px) 100px, 80px" loading="lazy" decoding="async" srcset="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F539de6bea0334a14afdfcccd452bf8a8?width=135&amp;height=30&amp;fit=cover&amp;sharp=true 135w,
2https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F539de6bea0334a14afdfcccd452bf8a8?width=270&amp;height=60&amp;fit=cover&amp;sharp=true 270w" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F539de6bea0334a14afdfcccd452bf8a8?width=135&amp;height=30&amp;fit=cover&amp;sharp=true" width="135" height="30" style="object-fit: cover; width: 135px; height: 30px;"><!--/qv--></a></p><h1 class="px-2 text-4xl md:text-[56px] self-center text-center font-bold leading-[1.175] lg:leading-snug w-full mt-[5vh]" style="font-family: Poppins, Helvetica, sans-serif;">You're in! <br class="visible md:hidden"> Now make it real.</h1><div class="mt-6 text-center flex space-x-2 items-center justify-center md:mb-0 flex-col md:flex-row"><span class="min-w-[190px] mb-4 md:mb-0">Your ticket in the style of</span><!--qv --><form class="relative" preventdefault:submit=""><input autofocus="" class="border-1 peer w-[200px] block appearance-none rounded-lg border border-gray-300 bg-transparent px-2.5 py-2 pr-6 text-sm text-gray-900 focus:outline-none focus:ring-0 peer-placeholder-shown:text-red-500" type="text" name="domain" id="domain" placeholder="your-domain.com" style="border-color: rgb(92, 43, 171); color: rgb(255, 255, 255);"><label class="absolute top-2 left-1 z-10 origin-[0] -translate-y-4 scale-75 transform cursor-text select-none bg-transparent px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:w-[calc(100%_-_10px)] peer-focus:w-auto text-left" for="domain" style="color: rgb(182, 153, 230); background-color: rgb(0, 0, 0);">Domain</label><button class="absolute top-[calc(25%_-_10px)] right-1 p-2.5 text-[#AC7EF4]" type="submit"><!--qv --><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-right" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" width="1em" height="1em" data-qwikest-icon=""><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l14 0"></path><path d="M13 18l6 -6"></path><path d="M13 6l6 6"></path></svg><!--/qv--></button></form><!--/qv--></div><div class="mx-auto relative z-20"><!--qv --><div class="mx-auto flex scale-100 flex-col md:flex-row mt-2 md:mt-0 min-w-[320px] xs:w-[100%] px-0 xs:px-2 sm:px-0"><div class="flex flex-col h-full"><div class="md:w-full flex flex-col h-full"><div class="grow bg-[#151934] py-7 h-full md:w-full flex flex-col rounded-tl-[32px] rounded-tr-[32px] border-t border-l border-r" style="background-color: transparent; border-color: rgb(89, 89, 89);"><div class="flex justify-between items-center px-4 md:px-8 w-full opacity-50"><div class="flex items-center"><!--qv --><svg fill="none" height="24" viewBox="0 0 112 24" width="112" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_136_3249)"><path d="M53.3937 5.81037C53.3848 5.59862 53.4197 5.38732 53.4962 5.18985C53.5728 4.99239 53.6893 4.81308 53.8384 4.66328C53.9875 4.51349 54.1659 4.39648 54.3623 4.31968C54.5587 4.24288 54.7689 4.20796 54.9794 4.21713C55.888 4.21713 56.5428 4.87557 56.5428 5.81037C56.5428 6.72401 55.888 7.3613 54.9794 7.3613C54.0709 7.3613 53.3937 6.72401 53.3937 5.81037Z" fill="hsla(0,0%,35%,1)"></path><path d="M96.0854 5.81037C96.0762 5.59869 96.1109 5.38742 96.1873 5.18996C96.2637 4.9925 96.3801 4.81317 96.5291 4.66335C96.6781 4.51353 96.8564 4.3965 97.0527 4.31968C97.2491 4.24287 97.4592 4.20795 97.6697 4.21714C98.5782 4.21714 99.233 4.87558 99.233 5.81037C99.233 6.72401 98.5782 7.3613 97.6697 7.3613C96.7612 7.3613 96.0854 6.72401 96.0854 5.81037Z" fill="hsla(0,0%,35%,1)"></path><path d="M35.8145 8.80228C38.9117 8.80228 40.6601 11.2894 40.6601 14.301C40.6601 17.3127 38.9117 19.7815 35.8145 19.7815C34.2049 19.7815 32.9795 19.1343 32.2953 18.0416L32.0149 19.539H30.0828V5.07581H32.4762V10.4195C33.0594 9.52981 34.2105 8.80228 35.8145 8.80228ZM35.3322 17.6595C37.1409 17.6595 38.2681 16.1833 38.2681 14.3025C38.2681 12.3821 37.1465 10.9186 35.3322 10.9186C33.5011 10.9186 32.3962 12.3751 32.3962 14.3025C32.3962 16.1833 33.5011 17.6595 35.3322 17.6595Z" fill="hsla(0,0%,35%,1)"></path><path d="M49.0865 15.2118V9.04474H51.4785V15.0863C51.4785 17.7765 50.253 19.7786 46.8741 19.7786C43.4951 19.7786 42.2697 17.7765 42.2697 15.0863V9.04474H44.663V15.2118C44.663 16.8502 45.4271 17.6595 46.8741 17.6595C48.321 17.6595 49.0865 16.8502 49.0865 15.2118Z" fill="hsla(0,0%,35%,1)"></path><path d="M91.4809 18.0754C91.4718 17.8637 91.5065 17.6524 91.5829 17.4548C91.6593 17.2573 91.7756 17.0779 91.9246 16.928C92.0735 16.778 92.2519 16.6609 92.4482 16.5839C92.6446 16.5069 92.8547 16.4718 93.0653 16.4808C93.9738 16.4808 94.6286 17.1407 94.6286 18.0754C94.6286 19.0102 93.9738 19.6264 93.0653 19.6264C92.1567 19.6264 91.4809 18.9891 91.4809 18.0754Z" fill="hsla(0,0%,35%,1)"></path><path d="M56.1656 9.04474H53.7722V19.5403H56.1656V9.04474Z" fill="hsla(0,0%,35%,1)"></path><path d="M58.5575 19.5404V5.07581H60.9508V19.5404H58.5575Z" fill="hsla(0,0%,35%,1)"></path><path d="M70.8242 5.07581H73.2162V19.5404H71.2841L71.0037 18.043C70.3391 19.1357 69.1123 19.7829 67.4845 19.7829C64.407 19.7829 62.6586 17.2958 62.6586 14.3025C62.6586 11.3092 64.407 8.80369 67.4845 8.80369C69.1123 8.80369 70.2396 9.53122 70.8228 10.4209L70.8242 5.07581ZM67.9878 10.9256C66.1792 10.9256 65.0519 12.3821 65.0519 14.3095C65.0519 16.1904 66.1736 17.6666 67.9878 17.6666C69.8021 17.6666 70.9238 16.1904 70.9238 14.3095C70.9238 12.3821 69.8232 10.9256 67.9878 10.9256Z" fill="hsla(0,0%,35%,1)"></path><path d="M84.8996 16.6683C84.1565 18.5492 82.4263 19.7829 80.1536 19.7829C76.9975 19.7829 74.9463 17.417 74.9463 14.2841C74.9463 11.2302 77.0368 8.80365 80.134 8.80365C83.2311 8.80365 85.2613 11.1681 85.2613 14.2404C85.271 14.4916 85.2498 14.7431 85.1982 14.9891H77.299C77.4798 16.6471 78.5454 17.7187 80.2139 17.7187C81.3608 17.7187 82.3058 17.1547 82.7488 16.1015L84.8996 16.6683ZM77.3382 13.2111H82.889C82.6885 11.7547 81.6818 10.7635 80.134 10.7635C78.5861 10.7635 77.5808 11.7744 77.3382 13.2111Z" fill="hsla(0,0%,35%,1)"></path><path d="M92.5816 11.209C92.4017 11.1842 92.2205 11.1705 92.039 11.1681C90.3495 11.1681 89.3442 12.0578 89.3442 14.0796V19.5403H86.9509V9.04475H88.8829L89.1633 10.5012C89.5447 9.83432 90.4252 8.94324 92.2395 8.94324C92.3404 8.94324 92.5816 8.96439 92.5816 8.96439V11.209Z" fill="hsla(0,0%,35%,1)"></path><path d="M98.8559 9.04474H96.4625V19.5403H98.8559V9.04474Z" fill="hsla(0,0%,35%,1)"></path><path d="M100.565 14.3024C100.565 11.35 102.657 8.80365 105.974 8.80365C109.291 8.80365 111.403 11.3514 111.403 14.3024C111.403 17.2534 109.312 19.7829 105.974 19.7829C102.636 19.7829 100.565 17.2548 100.565 14.3024ZM105.974 17.6595C107.724 17.6595 109.011 16.3243 109.011 14.3024C109.011 12.2806 107.724 10.9186 105.974 10.9186C104.224 10.9186 102.958 12.2538 102.958 14.3024C102.958 16.3511 104.245 17.6595 105.974 17.6595Z" fill="hsla(0,0%,35%,1)"></path><path d="M21.1376 7.20056C21.1376 5.2911 20.3834 3.45982 19.0409 2.10949C17.6984 0.759168 15.8775 0.000373892 13.9787 0L1.88438 0C1.38461 0 0.905314 0.199647 0.551923 0.555021C0.198533 0.910395 0 1.39239 0 1.89496C0 3.83786 4.09124 5.31265 4.09124 12C4.09124 18.6873 0 20.1621 0 22.1036C-1.38168e-07 22.6063 0.198488 23.0885 0.551838 23.4441C0.905188 23.7997 1.38449 23.9996 1.88438 24H13.9787C15.3607 23.9997 16.7131 23.5972 17.8727 22.8411C19.0322 22.085 19.9495 21.0076 20.5136 19.7389C21.0778 18.4702 21.2648 17.0644 21.0521 15.6912C20.8394 14.318 20.2361 13.036 19.3149 12C20.4906 10.6812 21.1398 8.97175 21.1376 7.20056ZM2.49008 2.0571H13.9787C14.978 2.0574 15.9555 2.35211 16.7901 2.90484C17.6248 3.45757 18.2802 4.24409 18.6753 5.16723C19.0704 6.09037 19.1879 7.10968 19.0132 8.09923C18.8386 9.08878 18.3796 10.0052 17.6927 10.7353L2.49008 2.0571ZM17.5904 20.4357C17.1172 20.9143 16.5544 21.294 15.9345 21.5527C15.3146 21.8114 14.6498 21.944 13.9787 21.9429H2.49429L17.6927 13.2647C18.608 14.2376 19.1098 15.5311 19.0914 16.8702C19.0731 18.2094 18.5361 19.4885 17.5946 20.4357H17.5904ZM4.71937 18.3053C5.65549 16.3368 6.13991 14.182 6.13687 12C6.14002 9.81755 5.6556 7.66227 4.71937 5.69334L15.7635 12L4.71937 18.3053Z" fill="hsla(0,0%,35%,1)"></path></g><defs><clip-path id="clip0_136_3249"><rect height="24" width="111.403" fill="hsla(0,0%,35%,1)"></rect></clip-path></defs></svg><!--/qv--><div class="w-12 md:w-48 h-1 mt-1 ml-2" style="background-color: rgb(89, 89, 89);"></div><div class="font-bold ml-2" style="color: rgb(191, 191, 191);">October 31 @ 9AM PST</div></div><!--qv --><svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 md:h-16 md:w-16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" width="1em" height="1em" data-qwikest-icon="" style="color: rgb(191, 191, 191);"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z"></path></svg><!--/qv--></div><h3 class="text-4xl md:text-6xl mt-4 px-4 md:px-8 font-bold pb-4 opacity-50" style="color: rgb(191, 191, 191);">Make It Real</h3></div></div><div class="flex items-center px-4 py-6 md:w-full relative md:pl-8 border rounded-bl-[32px] rounded-br-[32px]" style="letter-spacing: 0.42px; background-color: transparent; border-color: rgb(89, 89, 89);"><div class="bg-white rounded-full w-12 h-12 flex justify-center items-center border border-gray-400 overflow-hidden"><div class="w-[50px] h-[50px] bg-[#C1BDBD]"></div></div><span class="pl-3 whitespace-nowrap opacity-50" style="color: rgb(191, 191, 191);">ADMIT ONE</span><span class="mx-4">|</span><input placeholder="Add your name here" type="text" class="outline-none px-2 py-1 rounded max-w-[140px] xs:max-w-[200px] placeholder:text-[#AFA5A5] text-[#AFA5A5]" style="background-color: rgba(31, 31, 31, 0.3); color: rgb(191, 191, 191);"></div></div><div class="relative hidden md:block"><svg class="absolute top-0 left-1/2 transform -translate-x-1/2 scale-100" fill="none" height="100%" viewBox="0 0 4 262" width="4" xmlns="http://www.w3.org/2000/svg"><line stroke="hsla(0,0%,75%,1)" stroke-dasharray="4 10" stroke-linecap="round" stroke-width="3.5" x1="2" x2="2" y1="0" y2="100%"></line></svg></div><div class="p-7 text-center
3            border-l border-t border-b
4            rounded-tl-[32px] rounded-bl-[32px]
5            hidden md:block
6            border-[#C1BDBD]" style="writing-mode: vertical-rl; text-orientation: mixed; color: rgb(191, 191, 191);"><div class="text-2xl rotate-180">#0002733</div><div class="text-[10px] rotate-180  opacity-50">Ticket No.</div></div><div class="relative block md:hidden"><svg class="absolute left-0 top-1/2 transform -translate-y-1/2 scale-100 px-6" fill="none" height="3" width="100%" xmlns="http://www.w3.org/2000/svg"><line stroke="hsla(0,0%,75%,1)" stroke-dasharray="2.22 5.56 2.22 5.56" stroke-linecap="round" stroke-width="1.95314" x1="0" x2="100%" y1="2" y2="2"></line></svg></div><div class="p-2 text-center
7            border
8            rounded-[32px]
9            block md:hidden
10            border-[#C1BDBD]" style="color: rgb(191, 191, 191);"><div class="text-[10px] opacity-50">Ticket No.</div><div class="text-2xl">#0002733</div></div></div><!--/qv--></div><!--qv --><div class="relative group flex flex-row gap-3 justify-center items-center mx-auto"><span class="mr-1">SHARE</span><a class="border border-[#5B5F7A] p-2 rounded-lg bg-[#151934] hover:border-[#888] transition-colors duration-200" target="_blank" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmake-real.builder.io%2Fticket%2F28586ce1f1f04a159967de50b4c61005%2F%3Fv%3D6439409278693142%26name%3DClaudio%2BT%26domain%3D%26utm_source%3Dvcp-launch-social%26utm_campaign%3Dmake-it-real-launch-Q3-2024%24utm_content%3Dwebinar%26utm_from%3D28586ce1f1f04a159967de50b4c61005%26utm_medium%3Dtwitter&amp;t=builderio&amp;text=Claimed%20my%20ticket%20to%20Make%20It%20Real!%0A%0ACreate%20yours%20using%20my%20link%3A"><!--qv --><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="w-[27px] h-[27px]"><g clipPath="url(#clip0_126_519)"><path d="M13.5 10.6179L21 3H19.4471L13.7567 9.61448L9.21185 3H3.96987L10.8426 13.0023L3.96987 21.9908H5.52292L11.5321 15.0056L16.3318 21.9908H21.5738L13.5 10.6179ZM11.3729 13.0904L10.6766 12.0944L5.13603 4.16911H7.52142L11.9928 10.5651L12.6891 11.5611L18.5013 19.8748H16.116L11.3729 13.0908V13.0904Z" fill="hsla(240,8%,12%,1)"></path></g><defs><clip-path id="clip0_126_519"><rect fill="hsla(240,8%,12%,1)" height="24" transform="translate(0.522034)" width="22.604"></rect></clip-path></defs></svg><!--/qv--></a><a class="border border-[#5B5F7A] p-2 rounded-lg bg-[#151934] hover:border-[#888] transition-colors duration-200" target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmake-real.builder.io%2Fticket%2F28586ce1f1f04a159967de50b4c61005%2F%3Fv%3D6439409278693142%26name%3DClaudio%2BT%26domain%3D%26utm_source%3Dvcp-launch-social%26utm_campaign%3Dmake-it-real-launch-Q3-2024%24utm_content%3Dwebinar%26utm_from%3D28586ce1f1f04a159967de50b4c61005%26utm_medium%3Dlinkedin"><!--qv --><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="w-[27px] h-[27px]"><path clip-rule="evenodd" d="M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21ZM15.8288 18.4999H18.4999V13.0127C18.4999 10.6911 17.1839 9.56849 15.3456 9.56849C13.5065 9.56849 12.7325 11.0007 12.7325 11.0007V9.83327H10.1583V18.4999H12.7325V13.9505C12.7325 12.7315 13.2936 12.0061 14.3676 12.0061C15.3549 12.0061 15.8288 12.7031 15.8288 13.9505V18.4999ZM5.49994 7.09919C5.49994 7.98235 6.21045 8.69844 7.08728 8.69844C7.9641 8.69844 8.67419 7.98235 8.67419 7.09919C8.67419 6.21603 7.9641 5.49994 7.08728 5.49994C6.21045 5.49994 5.49994 6.21603 5.49994 7.09919ZM8.44229 18.4999H5.75808V9.83327H8.44229V18.4999Z" fill="hsla(240,8%,12%,1)" fill-rule="evenodd"></path></svg><!--/qv--></a><button class="border border-[#5B5F7A] p-2 rounded-lg bg-[#151934] hover:border-[#888] transition-colors duration-200 relative"><!--qv --><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="w-[27px] h-[27px]"><g clip-path="url(#clip0_126_527)"><path d="M3 12C3 12.7957 3.31607 13.5588 3.87868 14.1214C4.44129 14.684 5.20435 15.0001 6 15.0001C6.79565 15.0001 7.55871 14.684 8.12132 14.1214C8.68393 13.5588 9 12.7957 9 12C9 11.2044 8.68393 10.4413 8.12132 9.87869C7.55871 9.31607 6.79565 9 6 9C5.20435 9 4.44129 9.31607 3.87868 9.87869C3.31607 10.4413 3 11.2044 3 12Z" stroke="hsla(0,0%,100%,1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.50001"></path><path d="M15 6.00004C15 6.7957 15.3161 7.55877 15.8787 8.12139C16.4413 8.68401 17.2044 9.00008 18 9.00008C18.7956 9.00008 19.5587 8.68401 20.1213 8.12139C20.6839 7.55877 21 6.7957 21 6.00004C21 5.20438 20.6839 4.44131 20.1213 3.87869C19.5587 3.31607 18.7956 3 18 3C17.2044 3 16.4413 3.31607 15.8787 3.87869C15.3161 4.44131 15 5.20438 15 6.00004Z" stroke="hsla(0,0%,100%,1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.50001"></path><path d="M15 17.9999C15 18.7956 15.3161 19.5587 15.8787 20.1213C16.4413 20.6839 17.2044 21 18 21C18.7956 21 19.5587 20.6839 20.1213 20.1213C20.6839 19.5587 21 18.7956 21 17.9999C21 17.2043 20.6839 16.4412 20.1213 15.8786C19.5587 15.316 18.7956 14.9999 18 14.9999C17.2044 14.9999 16.4413 15.316 15.8787 15.8786C15.3161 16.4412 15 17.2043 15 17.9999Z" stroke="hsla(0,0%,100%,1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.50001"></path><path d="M8.69995 10.6995L15.3 7.29944" stroke="hsla(0,0%,100%,1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.50001"></path><path d="M8.69995 13.3L15.3 16.7001" stroke="hsla(0,0%,100%,1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.50001"></path></g><defs><clip-path id="clip0_126_527"><rect fill="hsla(240,8%,12%,1)" height="24" width="24"></rect></clip-path></defs></svg><!--/qv--><div class="absolute text-left left-20 top-0 w-full h-full flex items-center justify-center text-sm font-bold transition-opacity duration-200 backdrop-blur opacity-0">Copied to clipboard!</div></button><!--qv --><div class="w-72 pointer-events-none -ml-14 border border-neutral-800 bg-neutral-950 rounded-md absolute top-16 z-50 transition-all duration-500 md:group-hover:transform-none translate-y-2 md:group-hover:opacity-100 opacity-0" style=""><img class="w-full object-contain" height="200" src="/ticket/28586ce1f1f04a159967de50b4c61005/image?v=6439409278693142-0&amp;name=Claudio%20T&amp;domain=" width="300" style="aspect-ratio: 16 / 9;"><div class="p-3 text-left border-t border-neutral-800 bg-neutral-900 bg-opacity-40"><div class="text-xs opacity-50">make-real.builder.io</div><div class="mt-0.5">Join me at Builder Make It Real</div><div class="mt-0.5 text-xs opacity-50">Claim your ticket for this AI launch event by Builder.io</div></div></div><!--/qv--></div><!--/qv--></div>