fayazara

const express = require("express");
const app = express();
const axios = require("axios");

app.get("/", async (req, res) => {
  try {
    let BTC = "https://api.binance.com/api/v3/ticker/price?symbol=BTCUSDT";
    let ETH = "https://api.binance.com/api/v3/ticker/price?symbol=ETHUSDT";
    let LTC = "https://api.binance.com/api/v3/ticker/price?symbol=LTCUSDT";
    let XRP = "https://api.binance.com/api/v3/ticker/price?symbol=XRPUSDT";

fayazara

The common things

npm i nuxt-webfontloader nuxt-lazy-load @nuxtjs/toast vue-js-modal @tailwindcss/typography hooper @tailwindcss/forms

For Lightbox plugin npm install --save vue-cool-lightbox

A typical tailwind config file

fayazara

<template>
  <div class="space-y-4">
    <div>
      <ul>
        <li v-for="(item, i) in items" :key="i">
          <div
            class="flex items-center space-x-4 px-1 py-2 rounded-md hover:bg-gray-200 text-gray-700"
          >
            <span class="text-2xl">{{ item.icon }}</span>
            <span>{{ item.title }}</span>

fayazara

<template>
  <div class="relative h-full flex items-center" @mouseenter="show = true" @mouseleave="show = false">
    <button
      class="rounded-full overflow-hidden focus:ring-2 focus:ring-offset-1 focus:ring-offset-white focus:ring-blue-800 focus:outline-none"
    >
      <img src="https://fayazz.co/fayaz.jpg" class="h-8 w-8" alt="Profile" />
    </button>
    <transition
      enter-active-class="transition-all ease-out duration-100"
      enter-class="transform opacity-0 scale-95"

fayazara

<template>
  <main class="min-h-screen bg-gray-200" style="margin-top: 65px">
    <section class="container mx-auto py-8">
      <div class="grid grid-cols-4 gap-4">
        <div>
          <ul class="space-y-4">
            <li class="h-8 rounded bg-red-400" v-for="n in 7" :key="n"></li>
          </ul>
        </div>
        <div class="col-span-2">

fayazara

<template>
  <div class="mx-4 w-96">
    <input
      type="text"
      placeholder="Search..."
      class="search-bar search-focus"
    />
  </div>
</template>

fayazara

<template>
  <div class="min-h-nav">
    <div class="rounded-md border overflow-hidden bg-white">
      <div class="flex items-center justify-between p-4 border-b">
        <p class="text-xl font-semibold">Listings</p>
        <p class="text-blue-600">See all</p>
      </div>
      <p v-if="$fetchState.pending">Fetching listings...</p>
      <p v-else-if="$fetchState.error">An error occurred :(</p>
      <ul v-else class="divide-y border-b">

fayazara

<template>
  <header class="fixed top-0 left-0 w-full bg-white border-b">
    <div class="container mx-auto flex items-center py-3">
      <logo />
      <search />
      <navbar-actions />
    </div>
  </header>
</template>

fayazara

// Created by Fayaz https://twitter.com/fayazara

let widget = await createWidget();
if (config.runsInWidget) {
    Script.setWidget(widget);
} else {
    widget.presentSmall();
}
Script.complete();

fayazara

<template>
  <main class="py-24 bg-slate-50 min-h-screen">
    <div class="border-shadow">
      <div class="max-w-4xl mx-auto">
        <div ref="wrapper" class="flex items-center relative">
          <div
            ref="highlighter"
            class="bg-slate-200 absolute top-3 rounded-md h-8 transition-all duration-150"
            :style="highlightStyles"
          ></div>