import { request } from 'graphql-request'
 
const fetcher = query => request('/api/graphql', query)
 
function App () {
  const { data, error } = useSWR(
    `{
      Movie(title: "Inception") {
        releaseDate
        actors {
          name
        }
      }
    }`,
    fetcher
  )
  // ...
}

import axios from 'axios'
 
const fetcher = url => axios.get(url).then(res => res.data)
 
function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

import fetch from 'unfetch'
 
const fetcher = url => fetch(url).then(r => r.json())
 
function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

import useSWR, { mutate } from 'swr';

const handleUpdate = () => {
  // Perform a mutation and then update the cache
  mutate('/api/data', updatedData);
}

import { SWRConfig } from 'swr';

const swrConfig = {
  fetcher: customFetcher,
  onError: (error) => {
    // Handle errors globally
  },
};

// Wrap your app with SWRConfig
<SWRConfig value={swrConfig}>
  <App />
</SWRConfig>

import useSWR from 'swr'
 
const HeroSection = () => {
  const { data, error, isLoading } = useSWR('/api/herosection/123', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
 
  // render data
  return <div>hello {data.name}!</div>
}

selector {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}

selector .slick-track{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
} 

selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important; 
  transition-timing-function: linear !important; 
}

.grecaptcha-badge { visibility:hidden;}

(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
        if (b.right > w || b.left < 0) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
            console.log(t.currentNode);
        }
    };
}(document));

<div class="scl-navbar-menu">
    <div class="scl-navbar-items">
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                Name
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                Home
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content" data-dropdown>
            <button class="scl-dropdown-name" data-dropdown-button>
                More
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu">
                <a href="#" class="scl-dropdown-content">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content">drop down-content-4</a>
            </div>
        </div>
    </div>
    <div class="scl-hamburger-container">
        <div class="scl-hamburger"></div>
        <div class="scl-hamburger"></div>
        <div class="scl-hamburger"></div>
    </div>
</div>
<!-- navbar for phone -->
<aside class="scl-side-bar">
    <div class="scl-navbar-items-phone">
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                Name
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                Home
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
        <div class="scl-navbar-content-phone" data-dropdown-phone>
            <button class="scl-dropdown-name-phone" data-dropdown-button-phone>
                More
                <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" />
            </button>
            <div class="scl-dropdown-menu-phone">
                <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a>
                <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a>
            </div>
        </div>
    </div>
</aside>

<button class="scl-btn-rnd scl-btn-primary">Primary</button>
<button class="scl-btn-rnd scl-btn-secondary">Secondary</button>
<button class="scl-btn-rnd scl-btn-disabled">Disabled</button>

dfsafd

<link rel="stylesheet" href="https://speed-cl.netlify.app/components.css" />

<div>
    <input type="email" class="scl-input-validation" placeholder="email">
    <div class="scl-input-validation-text">Invalid email address!</div>
</div>

<input type="text" class="scl-input" placeholder="Name"/>

<img class="scl-round-image" src="#" alt="#"/>

<img src="#" alt="#" class="scl-img-res"/>

<div id="basic-hr-shadow">
    <div id="main-hr">
        <img src="4.jpg" alt="beautiful pic" id="img-hr" />
        <div id="text">
            <h3 id="text-title">High Coast Bridge</h3>
            <h4 id="author">by Anders Jildén</h4>
        </div>
    </div>
    <div id="btns btns-hr">
        <button class="btn">
            <p>READ</p>
        </button>
        <button class="btn">
            <p>BOOKMARK</p>
        </button>
        <button class="btn" id="icons-btn">
            <i class="far fa-heart"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-share-alt"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
</div>

<div id="basic-hr">
    <div id="main-hr">
        <img src="4.jpg" alt="beautiful pic" id="img-hr" />
        <div id="text">
            <h3 id="text-title">High Coast Bridge</h3>
            <h4 id="author">by Anders Jildén</h4>
        </div>
    </div>
    <div id="btns btns-hr">
        <button class="btn">
            <p>READ</p>
        </button>
        <button class="btn">
            <p>BOOKMARK</p>
        </button>
        <button class="btn" id="icons-btn">
            <i class="far fa-heart"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-share-alt"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
</div>

<div id="tom-basic-textonly">
    <div id="main-textonly">
        <div id="text-textonly">
            <div id="tom">
                <h3 id="tom-text-textonly">High Coast Bridge</h3>
                <h4 id="tom-author-textonly">by Anders Jildén</h4>
            </div>
            <h4 id="text-cont-textonly">
                High Coast bridge also known as Höga Kusten Bridge is located in
                Sweden
            </h4>
        </div>
    </div>
</div>

<div id="tom-basic-overlay">
    <div id="main-overlay">
        <img src="4.jpg" alt="beautiful pic" id="img-basic" />
        <div id="text-overlay">
            <div id="tom">
                <h3 id="tom-text">High Coast Bridge</h3>
                <h4 id="tom-author">by Anders Jildén</h4>
            </div>
            <h4 id="text-cont-overlay">
                High Coast bridge also known as Höga Kusten Bridge is located in
                Sweden
            </h4>
        </div>
    </div>
    <div id="btns-overlay">
        <button class="btn">
            <p>READ</p>
        </button>
        <button class="btn">
            <p>BOOKMARK</p>
        </button>
        <button class="btn" id="icons-btn">
            <i class="far fa-heart"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-share-alt"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
</div>

 <div id="tom-basic">
     <img src="#" alt="mail" class="badge-icon">
     <div id="discount">70%</div>
     <div id="main-close">
         <img src="#" alt="beautiful pic" id="img-basic" />
         <div id="text">
             <div id="tom">
                 <h3 id="tom-text">#</h3>
                 <h4 id="tom-author">#</h4>
             </div>
             <h4 id="text-cont">
             </h4>
         </div>
     </div>
     <div id="btns-close">
         <button class="btn">
             <p>READ</p>
         </button>
         <button class="btn">
             <p>BOOKMARK</p>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
     </div>
 </div>

 <div id="tom-basic">
     <img src="bookmark_black_24dp.svg" alt="mail" class="badge-icon">
     <div id="discount">70%</div>
     <div id="main">
         <img src="#" alt="beautiful pic" id="img-basic" />
         <div id="text">
             <div id="tom">
                 <h3 id="tom-text">#</h3>
                 <h4 id="tom-author">#</h4>
             </div>
             <h4 id="text-cont">
             </h4>
         </div>
     </div>
     <div id="btns">
         <button class="btn">
             <p>READ</p>
         </button>
         <button class="btn">
             <p>BOOKMARK</p>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
     </div>
 </div>

<button class="scl-btn scl-btn-float-primary"><img src="#"></button>
<button class="scl-btn scl-btn-float-secondary"><img src="#"></button>
<button class="scl-btn scl-btn-float-primary"><img src="#"></button>

<button class="scl-btn scl-btn-icon-primary"><img class="scl-icon" src="#">send</button>
<button class="scl-btn scl-btn-icon-secondary"><img class="scl-icon "src="#">download</button>

<button class="scl-btn scl-btn-text">Text</button>

<button class="scl-btn scl-btn-outline">Normal</button>
<button class="scl-btn scl-btn-outline-small">Small</button>

<button class="scl-btn scl-btn-primary">Primary</button>
<button class="scl-btn scl-btn-secondary">Secondary</button>
<button class="scl-btn scl-btn-disabled">Disabled</button>

<div class="scl-badge-wrapper">  
<img src="#" alt="mail" class="scl-badge-icon"><div class="scl-badge scl-badge-number">2</div>
</div>
<div class="scl-badge-wrapper"> 
<img src="#" alt="avatar" class="scl-badge-icon"><div class="scl-badge scl-badge-number">9</div>
</div>

<div class="scl-badge-wrapper">
    <img src="#" alt="avatar" class="scl-avatar scl-avatar-lg">
    <div class="scl-badge scl-badge-online"></div>
</div>

<div class="scl-badge-wrapper">
    <img src="#" alt="avatar" class="scl-avatar scl-avatar-lg">
    <div class="scl-badge scl-badge-offline"></div>
</div>

<div class="scl-badge-wrapper">
    <img src="#" alt="avatar" class="scl-avatar scl-avatar-md">
    <div class="scl-badge scl-badge-away"></div>

    <div class="scl-badge-wrapper">
        <img src="#" alt="avatar" class="scl-avatar scl-avatar-sm">
        <div class="scl-badge scl-badge-busy"></div>
    </div>

<div class="scl-alert" id="scl-alert-close">This is an alert with close button <button id="close"><img src="#"></button></div>

<div class="scl-alert" id="scl-alert-primary">This is a primary alert<img id="icon-primary" src="#"></div>
<div class="scl-alert" id="scl-alert-success">This is a success alert<img id="icon-success" src="#"></div>
<div class="scl-alert" id="scl-alert-warning">This is a warning alert<img id="icon-warning" src="#" /> </div>
<div class="scl-alert" id="scl-alert-error">This is an error alert<img id="icon-error" src="#"></div>

<div role="img" alt="avatar" class="scl-avatar scl-avatar-lg scl-avatar-txt">AA</div>
<div role="img" alt="avatar" class="scl-avatar scl-avatar-md scl-avatar-txt">Aa</div>
<div role="img" alt="avatar" class="scl-avatar scl-avatar-sm scl-avatar-txt">a</div>

<img src="img-avatar/user.png" alt="avatar" class="scl-avatar scl-avatar-lg">
<img src="img-avatar/female.png" alt="avatar" class="scl-avatar scl-avatar-md">
<img src="img-avatar/male.png" alt="avatar" class="scl-avatar scl-avatar-sm">

<div class="scl-grid-container-3">
    <div class="scl-grid-cell">1</div>
    <div class="scl-grid-cell">2</div>
    <div class="scl-grid-cell">3</div>
    <div class="scl-grid-cell">4</div>
    <div class="scl-grid-cell">5</div>
    <div class="scl-grid-cell">6</div>
    <div class="scl-grid-cell">7</div>
    <div class="scl-grid-cell">8</div>
    <div class="scl-grid-cell">9</div>
</div>

<div class="scl-grid-container-2">
    <div class="scl-grid-cell">1</div>
    <div class="scl-grid-cell">2</div>
    <div class="scl-grid-cell">3</div>
    <div class="scl-grid-cell">4</div>
</div>

<input type="range" min="0" max="100" value="50" class="vertical-sldier" id="range" />
<img src="volume_up_black_24dp.svg" id="volume-icon" />
<div id="range-value"></div>

<script>
    var slider = document.querySelector("#range");
    var output = document.querySelector("#range-value");
    
    output.innerHTML = slider.value;
    
    slider.oninput = function () {
    	output.innerHTML = this.value;
    	if (slider.value === "0") {
    		document.querySelector("#volume-icon").src = "volume_off_black_24dp.svg";
            document.querySelector("#range").style.opacity = "0.5";
    	} else {
    		document.querySelector("#volume-icon").src = "volume_up_black_24dp.svg";
            document.querySelector("#range").style.opacity = "1";
    	}
    };
    
</script>

<input type="range" min="0" max="100" value="50" class="vertical-sldier" id="range" />
<img src="volume_up_black_24dp.svg" id="volume-icon" />
<div id="range-value"></div>

<script>
    var slider = document.querySelector("#range");
    var output = document.querySelector("#range-value");
    
    output.innerHTML = slider.value;
    
    slider.oninput = function () {
    	output.innerHTML = this.value;
    	if (slider.value === "0") {
    		document.querySelector("#volume-icon").src = "volume_off_black_24dp.svg";
    	} else {
    		document.querySelector("#volume-icon").src = "volume_up_black_24dp.svg";
    	}
    };
    
</script>

<input type="range" min="1" max="100" value="50" class="slider" />

<input type="range" min="1" max="100" value="50" />

<div class="scl-toast-btn-wrapper">
    <div class="scl-toast-btn">tost btn</div>
</div>
<div class="scl-toast-wrapper left">This is a toast</div>

<script>
const sclToastBtn = document.querySelector(".scl-toast-btn");

sclToastBtn.addEventListener("click", sclToast);

function sclToast() {
	document.querySelector(".scl-toast-wrapper").style.display = "flex";
	setTimeout(disappear, 3000);
	function disappear() {
		document.querySelector(".scl-toast-wrapper").style.display = "none";
	}
}
</script>

<div class="star-container">
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star">
        <img src="#" />
    </div>
</div>

<div style={{position: 'absolute', width: '300px', height: '300px'}}>
        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="100%">
          <path fill="url(#gradient)">
            <animate
              attributeName='d'
              dur='10000ms'
              repeatCount='indefinite'
              values='
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
                M382.5,342Q310,434,205.5,396Q101,358,98.5,248Q96,138,207.5,87.5Q319,37,387,143.5Q455,250,382.5,342Z;
                M399.5,340.5Q309,431,207.5,393Q106,355,101.5,247Q97,139,201.5,108.5Q306,78,398,164Q490,250,399.5,340.5Z;
                M383.5,362Q323,474,210.5,417Q98,360,78,235Q58,110,185.5,83Q313,56,378.5,153Q444,250,383.5,362Z;
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
              '
            >
            </animate>
          </path>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style={{stopColor: 'rgb(255, 95, 109)'}}/>
              <stop offset="100%" style={{stopColor: 'rgb(255, 195, 113)'}}/>
            </linearGradient>
          </defs>
        </svg>
      </div>

<button class="modal-initialise">Modal</button>
<div id="overlay"><div>
<div class="modal">
    <div class="modal-header">
        Example modal
        <button class="modal-close">
            <img src="close-white24.svg" />
        </button>
    </div>
    <div class="modal-content">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit vero
        blanditiis delectus repellendus ducimus, adipisci totam temporibus
        nihil commodi quod expedita, sit, fugiat quibusdam voluptas.
    </div>
    <div class="action-btn">
        <button class="scl-btn scl-btn-primary">Action 1</button>
        <button class="scl-btn scl-btn-secondary">Action 2</button>
    </div>
</div>

javascript code:

const modalInitialise = document.querySelector(".modal-initialise");
const modalClose = document.querySelector(".modal-close");
const modal = document.querySelector(".modal");

modalInitialise.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "block";
	document.querySelector("#overlay").style.display = "block";
	document.querySelector("#overlay").style.backgroundColor =
		"rgba(0, 0, 0, 0.5)";
});

modalClose.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "none";
	document.querySelector("#overlay").style.display = "none";
});

document.addEventListener("mouseup", function (e) {
	var container = document.querySelector(".modal");
	if (!container.contains(e.target)) {
		container.style.display = "none";
		document.querySelector("#overlay").style.display = "none";
	}
});

<div class="subnav">
    <button class="link">
        <i class="fas fa-bars"></i>
    </button>
    <div class="subnav-content-hamburger">
        <div>Link1</div>
        <div>Link2</div>
        <div>Link2</div>
    </div>
</div>

<nav class="header-component">
    <div class="branding">
        <div class="header-component-logo">Logo</div>
        <div>Name</div>
    </div>
    <div class="header-component-more">
        <div class="subnav">
            <button class="link">
                Home <i class="fa fa-caret-down"></i>
            </button>
            <div class="subnav-content">
                <div>Link1</div>
                <div>Link2</div>
                <div>Link2</div>
            </div>
        </div>
        <div class="subnav">
            <button class="link">
                About <i class="fa fa-caret-down"></i>
            </button>
            <div class="subnav-content">
                <div>Link1</div>
                <div>Link2</div>
                <div>Link2</div>
            </div>
        </div>
        <div class="subnav">
            <button class="link">
                More <i class="fa fa-caret-down"></i>
            </button>
            <div class="subnav-content">
                <div>Link1</div>
                <div>Link2</div>
                <div>Link2</div>
            </div>
        </div>
    </div>
</nav>

<nav class="header-component">
    <div class="branding">
        <div class="header-component-logo">Logo</div>
        <div>Name</div>
    </div>
    <div class="header-component-more">
        <div class="more">Home</div>
        <div class="more">About</div>
        <div class="more">More</div>
    </div>
</nav>

<ul>
    <li class="scl-primary scl-stacked-item">
        This is a primary notification<img src="#" />
    </li>
    <li class="scl-success scl-stacked-item">
        This is a success notification
        <img src="#" />
    </li>
    <li class="scl-warning scl-stacked-item">
        This is a warning notification
        <img src="#" />
    </li>
    <li class="scl-error scl-stacked-item">
        This is an error notification
        <img src="#" />
    </li>
</ul>

<ul class="scl-list-default">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-numbers">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-roman">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-alphabet">
	<li class="scl-list-item">List Item</li>
</ul>

<ul class="scl-list-none">
	<li class="scl-list-item">List Item</li>
</ul>

<div class="warning-text">Example of warning text</div>
<div class="error-text">Example of error text</div>
<div class="wgt-900">font weight 900</div>
<div class="wgt-500">font weight 500</div>
<div class="wgt-200">font weight 200</div>

<div class="left-text">Left</div>
<div class="center-text">Center</div>
<div class="right-text">Right</div>

<div class="grey-text">This is an example of grey text</div>

<div class="small-text">Example of small text</div>

<div class="heading-1">Heading-1</div>
<div class="heading-2">Heading-2</div>
<div class="heading-3">Heading-3</div>

<label
					aria-label="password"
					class="form-label"
					for="password"
				>Password</label>
				<p><small>6 - 12 characters, one number, one symbol, one uppercase and
						one lowercase letter.</small></p>
				<input
					class="form-control"
					title="Must be 6 - 12 characters and contain at least one number, one symbol, one uppercase and one lowercase letter."
					type="password"
					id="password"
					name="password"
					required
					pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{6,12}$"
				/>