# Page Structure

{% tabs %}
{% tab title="HTML" %}

````html
<!doctype html>
<html lang="en" class="preset-ai" dir="ltr" data-pc-theme="light">

<head>
  <title>Live Preview | SaasAble Tailwind Template</title>
  <!-- [Meta] -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Phoenixcoded" />

  <!-- [Favicon] icon -->
  <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon" />
  
  <!-- [Page specific CSS] start -->
  <!-- [Page specific CSS] end -->
  
  <!-- [Font] Family -->
  <link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
  <!-- [Tabler Icons] https://tablericons.com -->
  <link rel="stylesheet" href="assets/fonts/tabler-icons.min.css" />
  <!-- [Template CSS Files] -->
  <link rel="stylesheet" href="assets/css/style.css" id="main-style-link" />
</head>

<body>
  <!-- [ Pre-loader ] start -->
  <div class="loader-bg">
  </div>
  <!-- [ Pre-loader ] End -->
  <!-- [ Nav ] start -->
  <nav class="bg-neutral-100 z-50 w-full relative">
  </nav>
  <!-- [ Nav ] start -->

  <!-- [ hero ] start -->
  <section class="relative overflow-hidden">
  </section>
  <!-- [ hero ] end -->
  
  <!-- ---------------------------- -->

  <!-- [ Block ] start -->
  <section class="common-section">
  </section>
  <!-- [ Block ] end -->
  
  <!--    You can add Multiple Block -->
  
  <!-- ---------------------------- -->
  
  <!-- [ Footer ] start -->
  <section class="common-section"> 
  </section>
  <!-- [ Footer ] end -->
  <!-- [ Main Content ] end -->
  <!-- Required Js -->
  <script src="assets/js/plugins/simplebar.min.js"></script>
  <script src="assets/js/plugins/popper.min.js"></script>
  <script src="assets/js/icon/custom-icon.js"></script>
  <script src="assets/js/plugins/feather.min.js"></script>
  <script src="assets/js/component.js"></script>
  <script src="assets/js/theme.js"></script>
  <script src="assets/js/script.js"></script>
  
  <!-- [Page Specific JS] start -->
  <!-- [Page Specific JS] end -->
  
</body>

</html>
```
````

{% endtab %}

{% tab title="GULP" %}

```cshtml
<!doctype html>
<html lang="en" class="preset-crm" @@bodySetup>
  <!-- [Head] start -->
  <head>
    @@include('../layouts/head-page-meta.html', {'title': 'CRM'})
    @@include('../layouts/head-css.html')
  </head>
  <!-- [Head] end -->
  <!-- [Body] Start -->
  <body >
    @@include('../layouts/loader.html')
    @@include('../layouts/component/component-header.html")

    @@include('partials/hero-1.html')
  
    <!-- ---------------------------- -->
    
    @@include('partials/hero-1.html')
    <!--    You can add Multiple Block -->
  
    <!-- ---------------------------- -->
    @@include('../layouts/scroll-top.html')
    @@include('../layouts/footer-js.html')
    
  </body>
</html>

```

{% endtab %}
{% endtabs %}
