# Simple Footer Social Category: footer Description: Offers a concise footer with social media icons, copyright information, and an optional scroll-to-top link. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) ## SenangStart CSS Code ```html <footer layout="flex col tw-lg:row container" space="m-x:auto p-t:medium p-x:medium-3x tw-lg:p-x:big-3x m-b:big-3x"> <div layout="flex justify:center"> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-google"></i> </a> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-linkedin"></i> </a> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-twitter"></i> </a> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-facebook"></i> </a> </div> <div layout="grow flex items:center justify:center tw-lg:justify:end" space="h:large" visual="font:tw-semibold"> 2024 © SenangStart </div> <div layout="flex justify:center"> <a href="#" layout="flex items:center justify:center" space="w:large h:large tw-lg:m-l:medium" visual="text-size:small bg:blue-600 text:white rounded:small"> <i class="fas fa-arrow-up"></i> </a> </div> </footer> ``` ## Tailwind CSS Code ```html <footer class="flex flex-col lg:flex-row container mx-auto pt-4 px-6 lg:px-16 mb-16"> <div class="flex justify-center"> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-google"></i> </a> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-linkedin"></i> </a> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-twitter"></i> </a> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-facebook"></i> </a> </div> <div class="flex-grow h-8 flex items-center justify-center lg:justify-end font-semibold"> 2024 © SenangStart </div> <div class="flex justify-center"> <a href="#" class="flex items-center justify-center w-8 h-8 text-sm lg:ml-4 bg-blue-600 text-white rounded-md"> <i class="fas fa-arrow-up"></i> </a> </div> </footer> ```