Home
Prajwal Hallale
Simple app landing page with video preview

Simple app landing page with video preview

Forked from> @prajwal/simple-app-landing-page

This tailwind example is contributed by Prajwal Hallale, on 25-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Landing Page

Author Prajwal Hallale

10.1k

9

Fork Fullscreen

<div class="bg-gray-50">

<main class="w-full flex justify-center flex-wrap sm:flex-row-reverse gap-6 p-4 md:pt-10">

<div class="px-4 max-w-[640px]">

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAwCAYAAAB3wmQ/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA7HSURBVHgB7V07bBzHGf5mj34FsHRy6UZrwCkjrQHDqQItu6SxT2ld8ASkcGPyWBhIp2MXIAWPUuOOx8JtRLlJOh6RKoEBHV0b0KpJGR4lA3YY3Y7n3525m519zR7vjtRpP2jF3dl5/PP453/M7BzDHOB1TptAoxWG3GOc3QTjnghuykshAGcBZ/zE4WyIxngw7N0IUKPGawCGGUHMFYZrW4xzXzCWj9kwFIy5VzNdjVVHZUabMBjCDpIS64KUsD5j452a4WqsIiox2q3NF/fnzmAGOJzu9w/e3UGNGisEK0YTUszlITsU0W9jOQiYE67X0q3GqsApi3Br88cNHjpPlshkBJfKFAzeQo0aK4BCRotVxXEfC1QVC9AUzPaIaMDq45G4norrdajra4lc1VHaY11cAayI3eaL60h7Vm1PUvuRFv6RuIaosVLIlGhe53nrqjAZgWjxNp9vYDUxMu5HWD56iCUqXfuoMXekGC12fPAr19gcvEe0YfUwENcH4tpGLM0CLB9kGrjaVWPOWDMDhF1E6s1l2GRliGw2xIPxInDl30VLD1f+DSziUpyeRTxX/rWlXd+dM8/6uhfI08VyJLde9wDV4M47XUKiSceDi6sLz9s866I6qMGpbqeYqkjqfisjPoVzebWNd772ji434/0TrRy6OshHWX703Mug/UimzcvzKCPNE6M+quyNHHpM5LVhOyNuV8uHaPG0dMomPdXiZE00fe39U9hhy6BN3e8j3bZ9LX/1/gjJvstyUB1p6bqybk+K0k0YjdSyq2SX5UHUbCveW2kNikuN0EVaUruIO3heqjI5NtSg0svYFdcdVIcr86PBY9Luy3f3c2jwM/IjuqiuRYyfBSqbHDRdZLfhPsrb8BHSA/1Au/8sI43eZgOUg9q5l1EO0dxG3C55Y8dFut0orIviulEcqpuXkW5XBUwYLQydLizx8a/XsPunX+Gff3kXw71r0V96pvAloInQqTJQ2kiqOmQLrYtrz4jj4+LYNZ6pDPKWBogbviqo4115P5J5bSOpmnSRpF1nvBNx3UVc3wMjTlPmQ3nqXk4VtmPE19dR++K6Z+TZRj4D+7IeAWKGCWT4oRbHRZJBPON5D8XwjfKJ/ruSzpFWRhGNTST7TKGN/PGxoaXbM9J1VLqIM2IHSEJ9yMVXf3wbn995MxH27jsM679Zi65vjs/x17/9nJv+/fccfO6/iU8/eSNK95//hvjuhzG+/vv/onsbSKnWG/Zu2Oj5AeKGuymux5h27gDxLOrKZx92s2YeWkgODGIIpQ7RX1PSVc2PBoyivY9YSqv31KEDea+X0UOyvqZtFCBmVFdLp8IUXKQHcFejg6DGzn3k25p6Omg0BZjWo6Wl95Gkc4hiqIlITSA6Hb5GY1EfrGvl9BG3sZKA95E/PnQnVs9IR+UOpAhq+NkqeRJZTGZCvc9itk9/+wa+uvt2xGAKxHiffuJETEppvv33/2EBJdW6FnEPkZw5lYfNx3ztUV+7p07vGc80+1dhNF+7p84/zMhPSS9dxQowrZeyuQcyj6oqI8GkuZ/xrAZxU8Y3mYLo7SIbej1o4utp9wpl0gyyTL3cpkaP3j7Xc9IPkJbsRJuy4fP67jGSUiyQYapNfPovUh2FO38LJSC1sIzJFCjexx8m1UhiKJPJdFA4MTLFswHnrIrN42PqHFBOgV3MF7runzX7ls3IJnRV7VnG+8AoW5WvD0oX8SBWdad6ZzkFiqDHHSHtUTPrlTUgizSPvpFW1cXXwg9hBx9x/Z5i6gzJsg2zEGSEmYyLkjhZeUXpHLk2VTrT2jLZJL6fjP/FH97KZTIFem+mywXjvqVTRA00H0l37yEuZ83KFmfa/WnG+7zBSxKBVKBBxjvq5zaKnQIXxahi/ABTWpUE8rX3A9j1UwtxvdpI2rUDxLbqotC0ee/EamM5Pv6wgSow45sSLg9ku1lj3GiVxKBKdrVnmu1vIF4gJkM5QDlsB6Q+wLImLhfVUCU/0/YaIGY2Jv9uI8l4lLaN6nToklPPKy++LY61+5a8FA5gB90JRJPoDXmtw04iuhlhvnafV6/bJXlFEs9ByEulGaFMGpXFf/89u/SVymGltJvvOygfwCaUV0khT8021YwN4/k+qkEfHOYsb9KhBqqLeGIhqbYvyx1gKuUCJGnKQrOADkKn4DnAbA6lnnZ/B8Vu/aYss22E631JE2rVfvaRdu3rdAwL0rlGug0z3ZqwdW6LAYsyvPiJV2a2WWDreZRwS94HxjN1EA0cNfDzBhsZs7oRTLYNNZiPfFC+u1qefRmf7KsWqks0pdq68pkYRw2gDSTz68q/IyTX3JqYupy3kDHTaukUPFnWsazDSOah2oPa7aZ87yM5qGyljwml4vlIMsUA6T7sIelB7Gh5qHp/hqmU30L2Gl0WyJ6jdn+GdBsX1e1Ivm9mlBWlcwSTubAAueCXgSrl8GyxrSNAckYkRiADmRinhfzZlzpTH3yujE8NmdfgFH/bCGtjugZlo76YuIvkGhDRT0zga3HIpT3UaNjR3im7heqsS549g57DDLp1Z1EX6XUlokNnshPMtlao8DgjLKut7+Tc604gqqvaqdGBnY2mtII2pt5aBWqffkE6NXGbkxnRNKAbB5Yz7TeDcywaJDVpPa0CmhZx7iHdiTQgaRA/y0kTIK1qKUbqIR99WV5WOhsXtQliIFqjOch5R3XoGuE9SUOWqqNoMdW/AdIL4dS2rpZO0THKyJOY28PF0M8IG2SE6e2ot0sX6Ta26TMFYsqsPqe63Zsx3aSd2e3Ns3K9UcJmHU2Ht/V8ck87SIpATFZhHW2CkwfXbfVZGjg0GKgRhrCHcgAEqAY18ALMZwOtol/lGSwojSv/KtUrCx6mbRJgfjjFdPKkybGVE89FPn16PwcoX1rY0O4VQ5X1nb5Vy0w3QgZtlfZMqUXoqq7+IhCDEXORxKxon1WFsgNmSTcLo1RhZhvMQv8saQKLOPOsm4upbaNrKIcFaYKCd7P2s45Z65ebjhhNNyJLQcx29P3LaL2LXPgXdZD87s8vUKMYtzZ/3GIYd8DY4GTv2j2sFrpAavtfgHyb6JVEZUYjfPfDy+hSKFMLF4gAK4J4v6nzVD0zJ/yATgHzOi98Ho57USDnbe/L58fDh9f6WB2YXroAsc2zUlgTBtoJm++ev+WBswALgPflWYez2J3NhBQZXqoUeSnUEWc6GTbGA6wOqE7UtsomGuDial8VkHoayPsq6iI5YY6rpFsTbsfA2htyxcAYX8zWGjb1uPHwcich+kJBSLuPMBaOgQaGK3bWJU0gh5ht6WMemLXsPipiDQ4bInxFWY2HlY1Wr/OTG9/9PLL8zGYhiPdpvt0c9t4JyuJK5uqV53k16lYjDWGjjQVHO/t4FdGwUzPEoPb4uLFLW7Z4eC7tUQdiaSP6kQ1l8yg7KTHtMO6rJRBlN93+8vmR+mEPoXbvDB9c72plmbYWnbg8MGnhIaU/Jxqi4/SEiniQQ3tZfpPfQiiqW43LhRPNfJwN8OrBSo2SA1Uxhun08Tjj+8s6pNWgZYLoCIlqX43r+T2RR1Bcat1qFCP6+EvYOsdYMGi9zCbMFoyHVjsthPRQm2sJdKb/XZIKYnBO0kfnRsaf3IxIQhkTT0BhLF7pv5A6ljphjLNDme+Q529WzoU8fsJVz6IeO6Ju9yhfLaxbH61++YgXrJ2wJ2bUrANg5gY64uCL37+VCPv2X9V2gSRgqTbqeznFoD4QUlANwoG3eaYzTlNKyC6dtMXVyr/wbAr1q4sLInbTh+6UlnBn+PBGVz52dXXULr/k8RNi4tkW+Sk7rq/nJyYb6tvLcjjUgGS0yLO1ebbHF3j2O+1hpMVt9b0Z7QT5+h+V9jVOIFzufWvvGy0BSGYjqXF76/lNkf6A3ObD3tS2WjjGoQd9bd9Jeq5YY7wjJJ4P6/yclpbfSGMymR8OBCP68UP8kWztILk8TLdgLUGq0a6SooN7rMHGO9ZRkwO4SYu+XFzSYRDQboul/AAiS/7McEZ5Aarl5xanpfW2xLEQFH/WrUU1LohJT9Bsx2bbYT53+6sIkcpVgSnIQ0fewhyHjxsxnrCdKp4VeRVQTO956v2rVr+VQmLKk27qyrMe2V8mLmR/5SMYPpjYNdYgxjx5eG2ddvoLpvuIHAYs+YmFK1SxNmYBYzcTz+c5A5onv29LM/aaiyrgiX5yU++dhhlWS7NLRGr3Pnnl4h8etJ8B52l/FWBE3sIqCaLBLNzmoaiLsMsEl423BdPRgKOrL1RH+iDTiyKznB0gjKfaQbjNz5R5JNTQlihnImXDtbXPhNRN59MQi+vhdF4L+RrZw5MPRcMwbFfanp3Mr0nbxoYPr0/stNDhLS2/oLbPLhcpRos3sp5uC2artIg9N/srBySFqtpRNLgEM4nF3Mg2E/8cT3j/xOBeC8LwpfDYhd4ksr7LhKTPdJR6woGyz0J+ogayE7vj1WZY+vGNI+HlG8ZOFy3PJC0DEWcwWejmYUfk22ScP4uPzrP3OGblxxnu39p6cdNh/ISPiTY+cemLsqxt2hqLQeYhiqIT+2QL4YpA2mUzuacFg+rHC3jCxX7Ew/Onyd8ZICa60Z88NsJkWWTHiYE8UffIcZR0QLhiNNPA9vT1uRQtDcOJQ/mSp1cwi0h3gIoQ+elfczeJeaOf3GIakwl6EnWrcSnIPa2UbKGrwGwRk81glylEk4ZQh5HzaT/lf/Kg6RlpApkm0IInG40jxxGpsUkHy0jS2kE+LeSYSf0GWsScTvXzNiSd6yz7qINRtLZWQE+N5aHULKBdBVKNXLbXaiQXYfuYE6REmnymbruFS9GTZefIPJt570tocTFH+4n2UUpaguFq7fJ/5WFlf0/26C3tuzV+woQxXw+WGquCSo4ub/O0y+EscpPqKLIpLqAq1qhxFVGJ0QiRKhU6tBdwA/PDSNopvWHthq6xgqjMaArSdvF5vG3LmyUPciaIta3jmsFqrDpmZjQdiumEpPPkEeP07GpR4iPbOBsyxp8J9zh5AA9r5qrxuuAXBlL2pvXWo0IAAAAASUVORK5CYII=" class="h-20 py-4" alt="audiostory app maker">

<h1
                class="md:text-start text-center pt-2 font-extrabold text-[36px] md:text-[50px] leading-10 md:leading-[54px]">
                #1 App Builder
                <br>
                for audiobooks and podcasts
            </h1>

<p class="md:text-start text-center py-8 text-xl md:text-2xl font-bold text-gray-600">
                Studio makes it easy to create high-quality audio apps
                right on your phone
            </p>

<div class="flex flex-col items-center md:items-start">

<a href="https://www.youtube.com/watch?v=SPAr1TaSW2o">
                    <svg id="svg51" class="h-24 md:h-28 py-6" version="1.1" viewBox="0 0 180 53.333"
                        xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                        xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
                        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
                        <path id="path11"
                            d="m173.33 53.333h-166.66c-3.6666 0-6.6665-2.9999-6.6665-6.6665v-39.999c0-3.6666 2.9999-6.6665 6.6665-6.6665h166.66c3.6666 0 6.6665 2.9999 6.6665 6.6665v39.999c0 3.6666-2.9999 6.6665-6.6665 6.6665"
                            fill="#100f0d" stroke-width=".13333" />
                        <path id="path13"
                            d="m173.33 1e-3h-166.66c-3.6666 0-6.6665 2.9999-6.6665 6.6665v39.999c0 3.6666 2.9999 6.6665 6.6665 6.6665h166.66c3.6666 0 6.6665-2.9999 6.6665-6.6665v-39.999c0-3.6666-2.9999-6.6665-6.6665-6.6665zm0 1.0661c3.0879 0 5.5999 2.5125 5.5999 5.6004v39.999c0 3.0879-2.5119 5.6004-5.5999 5.6004h-166.66c-3.0879 0-5.5993-2.5125-5.5993-5.6004v-39.999c0-3.0879 2.5114-5.6004 5.5993-5.6004h166.66"
                            fill="#a2a2a1" stroke-width=".13333" />
                        <path id="path35"
                            d="m142.58 40h2.4879v-16.669h-2.4879zm22.409-10.664-2.8519 7.2264h-0.0853l-2.9599-7.2264h-2.6799l4.4399 10.1-2.5319 5.6185h2.5946l6.8412-15.718zm-14.11 8.7706c-0.81331 0-1.9506-0.40786-1.9506-1.4156 0-1.2865 1.416-1.7797 2.6373-1.7797 1.0933 0 1.6093 0.23546 2.2733 0.55732-0.19333 1.5442-1.5226 2.6379-2.9599 2.6379zm0.30133-9.1352c-1.8013 0-3.6666 0.79371-4.4386 2.5521l2.208 0.92184c0.47198-0.92184 1.3506-1.2218 2.2733-1.2218 1.2866 0 2.5946 0.77131 2.6159 2.1442v0.17133c-0.45066-0.25733-1.416-0.64318-2.5946-0.64318-2.3813 0-4.8039 1.3077-4.8039 3.7524 0 2.2302 1.952 3.6671 4.1386 3.6671 1.672 0 2.5959-0.75054 3.1732-1.6301h0.0867v1.2874h2.4026v-6.391c0-2.9593-2.2106-4.6103-5.0612-4.6103zm-15.376 2.3937h-3.5386v-5.7133h3.5386c1.86 0 2.9159 1.5396 2.9159 2.8566 0 1.2917-1.056 2.8567-2.9159 2.8567zm-0.064-8.0337h-5.9614v16.669h2.4869v-6.3149h3.4746c2.7573 0 5.4679-1.9958 5.4679-5.1765 0-3.1801-2.7106-5.1769-5.4679-5.1769zm-32.507 14.778c-1.7188 0-3.1573-1.4396-3.1573-3.415 0-1.9984 1.4385-3.4583 3.1573-3.4583 1.6969 0 3.0286 1.46 3.0286 3.4583 0 1.9754-1.3317 3.415-3.0286 3.415zm2.8567-7.8403h-0.086c-0.55826-0.66572-1.6328-1.2672-2.9853-1.2672-2.8359 0-5.4348 2.4921-5.4348 5.6925 0 3.1786 2.5989 5.6488 5.4348 5.6488 1.3525 0 2.427-0.6016 2.9853-1.2885h0.086v0.81558c0 2.1703-1.1598 3.3296-3.0286 3.3296-1.5245 0-2.4697-1.0953-2.8567-2.0188l-2.1691 0.90206c0.62238 1.503 2.2759 3.351 5.0259 3.351 2.9218 0 5.392-1.7188 5.392-5.9077v-10.181h-2.3634zm4.0822 9.7304h2.4906v-16.669h-2.4906zm6.164-5.4988c-0.0641-2.1911 1.6978-3.3078 2.9645-3.3078 0.98851 0 1.8254 0.49425 2.1057 1.2026zm7.7326-1.8906c-0.47238-1.2666-1.9114-3.6082-4.8541-3.6082-2.9218 0-5.3488 2.2983-5.3488 5.6707 0 3.1791 2.4062 5.6707 5.6275 5.6707 2.5989 0 4.1031-1.589 4.7264-2.513l-1.9333-1.289c-0.64465 0.94531-1.5249 1.5682-2.7931 1.5682-1.2666 0-2.1692-0.58012-2.7483-1.7186l7.5815-3.1359zm-60.409-1.8682v2.4057h5.7565c-0.17186 1.3532-0.62292 2.3411-1.3104 3.0286-0.83798 0.83745-2.1483 1.7614-4.4462 1.7614-3.5443 0-6.315-2.8567-6.315-6.4009s2.7707-6.4013 6.315-6.4013c1.9118 0 3.3077 0.75198 4.3388 1.7186l1.6974-1.6973c-1.4396-1.3745-3.351-2.427-6.0362-2.427-4.8552 0-8.9363 3.9524-8.9363 8.807 0 4.8541 4.0811 8.8066 8.9363 8.8066 2.6202 0 4.5967-0.85932 6.143-2.4702 1.5896-1.5896 2.0838-3.8234 2.0838-5.628 0-0.55785-0.04333-1.0734-0.1292-1.5032zm14.772 7.3675c-1.7188 0-3.201-1.4177-3.201-3.4368 0-2.0406 1.4822-3.4364 3.201-3.4364 1.7181 0 3.2003 1.3958 3.2003 3.4364 0 2.0191-1.4822 3.4368-3.2003 3.4368zm0-9.1075c-3.137 0-5.6927 2.3842-5.6927 5.6707 0 3.265 2.5557 5.6707 5.6927 5.6707 3.1358 0 5.692-2.4057 5.692-5.6707 0-3.2865-2.5562-5.6707-5.692-5.6707zm12.417 9.1075c-1.7176 0-3.2003-1.4177-3.2003-3.4368 0-2.0406 1.4828-3.4364 3.2003-3.4364 1.7188 0 3.2005 1.3958 3.2005 3.4364 0 2.0191-1.4817 3.4368-3.2005 3.4368zm0-9.1075c-3.1358 0-5.6915 2.3842-5.6915 5.6707 0 3.265 2.5557 5.6707 5.6915 5.6707 3.137 0 5.6927-2.4057 5.6927-5.6707 0-3.2865-2.5557-5.6707-5.6927-5.6707"
                            fill="#fff" stroke-width=".13333" />
                        <path id="path37"
                            d="m27.622 25.899-14.194 15.066c5.34e-4 0.0031 0.0016 0.0057 0.0021 0.0089 0.43532 1.636 1.9296 2.8406 3.703 2.8406 0.70892 0 1.3745-0.19166 1.9453-0.52812l0.04533-0.02656 15.978-9.22-7.479-8.141"
                            fill="#eb3131" stroke-width=".13333" />
                        <path id="path39"
                            d="m41.983 23.334-0.0136-0.0093-6.8982-3.999-7.7717 6.9156 7.7987 7.7977 6.8618-3.9592c1.203-0.64945 2.0197-1.9177 2.0197-3.3802 0-1.452-0.80571-2.7139-1.9968-3.3655"
                            fill="#f6b60b" stroke-width=".13333" />
                        <path id="path41"
                            d="m13.426 12.37c-0.08533 0.31466-0.13018 0.64425-0.13018 0.98651v26.623c0 0.34162 0.04432 0.67233 0.13072 0.98587l14.684-14.681-14.684-13.914"
                            fill="#5778c5" stroke-width=".13333" />
                        <path id="path43"
                            d="m27.727 26.668 7.3473-7.3451-15.96-9.2534c-0.58012-0.34746-1.2572-0.54799-1.9817-0.54799-1.7734 0-3.2697 1.2068-3.7051 2.8447-5.34e-4 0.0016-5.34e-4 0.0027-5.34e-4 0.0041l14.3 14.298"
                            fill="#3bad49" stroke-width=".13333" />
                        <path id="path33"
                            d="m63.193 13.042h-3.8895v0.96251h2.9146c-0.0792 0.78545-0.39172 1.4021-0.91878 1.85-0.52705 0.44799-1.2 0.67292-1.9958 0.67292-0.87291 0-1.6125-0.30413-2.2186-0.90824-0.59385-0.61665-0.89584-1.3792-0.89584-2.2979 0-0.91864 0.30199-1.6812 0.89584-2.2978 0.60612-0.60412 1.3457-0.90624 2.2186-0.90624 0.44799 0 0.87504 0.07707 1.2666 0.24586 0.39172 0.16866 0.70625 0.40412 0.95211 0.70625l0.73958-0.73958c-0.33546-0.38132-0.76038-0.67292-1.2876-0.88544-0.52705-0.21253-1.077-0.31453-1.6708-0.31453-1.1645 0-2.1519 0.40412-2.9582 1.2104-0.80625 0.80825-1.2104 1.8041-1.2104 2.9811 0 1.177 0.40412 2.175 1.2104 2.9813 0.80625 0.80611 1.7937 1.2104 2.9582 1.2104 1.2229 0 2.1979-0.39172 2.9479-1.1876 0.66038-0.66238 0.99784-1.5582 0.99784-2.679 0-0.1896-0.02293-0.39172-0.05627-0.60425zm1.5068-3.7332v8.0249h4.6852v-0.98544h-3.654v-2.5457h3.2958v-0.96251h-3.2958v-2.5437h3.654v-0.98758zm11.255 0.98758v-0.98758h-5.5145v0.98758h2.2417v7.0373h1.0312v-7.0373zm4.9925-0.98758h-1.0312v8.0249h1.0312zm6.8066 0.98758v-0.98758h-5.5144v0.98758h2.2415v7.0373h1.0312v-7.0373zm10.406 0.05626c-0.79585-0.81877-1.7708-1.2229-2.9354-1.2229-1.1666 0-2.1415 0.40412-2.9374 1.2104-0.79585 0.79585-1.1874 1.7937-1.1874 2.9811s0.39159 2.1854 1.1874 2.9813c0.79585 0.80611 1.7708 1.2104 2.9374 1.2104 1.1541 0 2.1395-0.40426 2.9354-1.2104 0.79585-0.79585 1.1874-1.7938 1.1874-2.9813 0-1.177-0.39159-2.1729-1.1874-2.9686zm-5.1332 0.67078c0.59372-0.60412 1.3229-0.90624 2.1978-0.90624 0.87291 0 1.6021 0.30213 2.1854 0.90624 0.59372 0.59372 0.88531 1.3686 0.88531 2.2978 0 0.93131-0.29159 1.7041-0.88531 2.2979-0.58332 0.60412-1.3125 0.90824-2.1854 0.90824-0.87491 0-1.6041-0.30413-2.1978-0.90824-0.58132-0.60625-0.87291-1.3666-0.87291-2.2979 0-0.92918 0.29159-1.6916 0.87291-2.2978zm8.7706 1.3125-0.0437-1.548h0.0437l4.0791 6.5457h1.077v-8.0249h-1.0312v4.6957l0.0437 1.548h-0.0437l-3.8999-6.2437h-1.2562v8.0249h1.0312z"
                            fill="#fff" stroke="#fff" stroke-miterlimit="10" stroke-width=".26666" />
                    </svg>
                </a>

<div class="flex items-center gap-6 mt-4 pl-1">
                    <a class="text-gray-700 hover:text-orange transition-colors"
                        href="https://www.instagram.com/audiostoryappstudio">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-8">
                            <path fill="currentColor"
                                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
                            </path>
                        </svg>
                    </a>
                    <a class="text-gray-700 hover:text-orange transition-colors"
                        href="https://t.me/audiostoryappstudio">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="h-8">
                            <path fill="currentColor"
                                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
                            </path>
                        </svg>
                    </a>
                    <a class="text-gray-700 hover:text-orange transition-colors"
                        href="https://www.youtube.com/@audiostoryappstudio">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-8" viewBox="0 0 24 24">
                            <path
                                d="m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z" />
                        </svg>
                    </a>
                </div>

</div>

</div>

<div class="relative max-w-lg flex justify-center items-center">

<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="320" height="640"
                style="box-shadow: 10px 10px 5px 12px rgb(209, 218, 218)"
                class="rounded rounded-xl border border-4 border-black" type="text/html"
                src="https://www.youtube.com/embed/gXPggzt8UnU?autoplay=0&fs=0&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0&origin=https://youtubeembedcode.com">
            </iframe>

<span class="absolute -right-1 top-28 border border-4 border-black h-10 rounded-md"></span>
            <span class="absolute -right-1 top-[220px] border border-4 border-black h-24 rounded-md"></span>

</div>

</main>

</div>

Related Examples

Landing page

Author:
Freja Jensen

3 years ago

13.3k
Simple app landing page

Author:
Prajwal Hallale

3 years ago

9.1k
Landing Page Template
source https://github.com/gary149/tailwindcss-landing-gradients/blob/master/index.html

Author:
Conan Hilton

3 years ago

15.9k
Simple landing page

Author:
Lîmåã M

2 years ago

19.6k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21.8k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.8k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

10 months ago

1.4k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

883
Nature Hero

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.9k
landing page
web Design

Author:
Hacker Development

9 months ago

1.2k
Video Player
Youtube Video Player

Author:
KULDEEP

7 months ago

732
Page not found
When lost get help to get back home

Author:
ORGIN_DREAMS

8 months ago

941

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12