A
Anonymous

Social Media Footer - Copy this Html, Tailwind Component to your project

Hola, tengo este footer, y basicamente muestra mis tres links a mis redes sociales, dos de instagram y una de tiktok, quiero que sea responsive y que arregles si algo esta mal, estructuralo, no cambies los iconos ni los links ni los nombres. mi codigo base que quiero que utilices para mejorar es el siguiente: <section class="flex flex wrap justify center items center gap 4 text sm md:text base"> <div class="flex items center space x 2"> <div class="relative group"> <div class="flex w 10 h 10 rounded full items center justify center"> <svg class="w 5 h 5" id="instagram" fill="0000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="169.063px" height="169.063px" viewBox="0 0 169.063 169.063" style="enable background:new 0 0 169.063 169.063;" xml:space="preserve"> <path d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752 c25.727,0,46.656 20.93,46.656 46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407 c0,17.455 14.201,31.655 31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752 c17.455,0,31.656,14.201,31.656,31.655V122.407z" /> <path d="M84.531,40.97c 24.021,0 43.563,19.542 43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563 19.541,43.563 43.561 C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c 15.749,0 28.563 12.812 28.563 28.561 c0 15.75,12.813 28.563,28.563 28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z" /> <path d="M129.921,28.251c 2.89,0 5.729,1.17 7.77,3.22c 2.051,2.04 3.23,4.88 3.23,7.78c0,2.891,1.18,5.73,3.23,7.78 c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73 1.18,7.78 3.22c2.05 2.05,3.22 4.89,3.22 7.78c0 2.9 1.17 5.74 3.22 7.78 C135.661,29.421,132.821,28.251,129.921,28.251z" /> </svg> </div> <div class="flex flex col"> <p class=" font medium text gray 900">Instagram</p> <p class=" text gray 600"><a target="_blank" rel="noopener noreferrer" title="Ig @nidomaniua" class="font bold text vomito hover:text amarillo" href="https://www.instagram.com/nidomaniua/">@nidomaniua</a></p> </div> </div> <div class="flex items center space x 2"> <div class="flex shrink 0 w 10 h 10 rounded full flex items center justify center"> <svg class="w 5 h 5" id="instagram" fill="0000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="169.063px" height="169.063px" viewBox="0 0 169.063 169.063" style="enable background:new 0 0 169.063 169.063;" xml:space="preserve"> <path d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752 c25.727,0,46.656 20.93,46.656 46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407 c0,17.455 14.201,31.655 31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752 c17.455,0,31.656,14.201,31.656,31.655V122.407z" /> <path d="M84.531,40.97c 24.021,0 43.563,19.542 43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563 19.541,43.563 43.561 C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c 15.749,0 28.563 12.812 28.563 28.561 c0 15.75,12.813 28.563,28.563 28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z" /> <path d="M129.921,28.251c 2.89,0 5.729,1.17 7.77,3.22c 2.051,2.04 3.23,4.88 3.23,7.78c0,2.891,1.18,5.73,3.23,7.78 c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73 1.18,7.78 3.22c2.05 2.05,3.22 4.89,3.22 7.78c0 2.9 1.17 5.74 3.22 7.78 C135.661,29.421,132.821,28.251,129.921,28.251z" /> </svg> </div> <div> <p class=" font medium text gray 900">Instagram</p> <p class=" text gray 600"><a target="_blank" rel="noopener noreferrer" title="Ig @maniuacommunity" class="font bold text vomito hover:text amarillo" href="https://www.instagram.com/maniuacommunity/">@maniuacommunity</a></p> </div> <div class="flex items center space x 2"> <div class="flex shrink 0 w 10 h 10 rounded full flex items center justify center"> <svg class="w 5 h 5" id="tiktok" fill="0000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M412.19,118.66a109.27,109.27,0,0,1 9.45 5.5,132.87,132.87,0,0,1 24.27 20.62c 18.1 20.71 24.86 41.72 27.35 56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51 .18,12.69,0,.52 .05,1 .08,1.56,0,.23,0,.47 .05.71,0,.06,0,.12,0,.18a70,70,0,0,1 35.22,55.56,68.8,68.8,0,0,1 34.11,9c 38.41,0 69.54 31.32 69.54 70s31.13 70,69.54 70a68.9,68.9,0,0,1,21.41,3.39l.1 83.94a153.14,153.14,0,0,0 118,34.52,161.79,161.79,0,0,0 35.3,43.53c 3.48,6 16.61,30.11 18.2,69.24 1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v .2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66 .31,33.32,0,62.46 13.81,32.32 15.31,50.72 38.12,50.72 38.12a158.46,158.46,0,0,0,27.64 45.93c7.46 19.61,9.95 43.13,9.95 52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z"></path> </svg> </div> <div> <p class=" font medium text gray 900">TikTok</p> <p class=" text gray 600"><a target="_blank" rel="noopener noreferrer" title="Ig @maniuacommunity" class="font bold text vomito hover:text amarillo" href="https://www.tiktok.com/@nidomaniua?_t=8rsOmbOZnlp&_r=1">@nidomaniua</a></p> </div> </div> </section>

Prompt
Component Preview

About

Social Media Footer - Showcase your Instagram and TikTok links in a responsive design, built with HTML and Tailwind. Start coding now!

Share

Last updated 1 month ago