I want to make react-reveal responsive when it in mobile version disable or make another style-CodePudding

import React from "react";
import { pricing } from "../../database";
import { Fade, Zoom } from "react-reveal";
import { PricingCard } from "../Pricing";

const Pricing = () => {
  const { email } = pricing;

  return (
    <div className="flex items-center justify-center mt-40 flex-col dark:text-white">
      
      <Zoom left cascade>
        <h1 className="font-bold text-4xl my-3">PRICING</h1>
      </Zoom>

      <Zoom>
        <h2>I will work according to your choice</h2>
      </Zoom>

      <div className="flex justify-center gap-10 bg-opacity-50 dark:text-white leading-loose ">
        <PricingCard />
      </div>
    </div>
  );
};

export default Pricing;

I want Zoom style work in desktop version only and disable on mobile version, I'am using react js and tailwindCSS, hope my react-reveal can use with them

CodePudding user response：

You can use with just css tricky ) Now zoom is working only large (lg) devices

import React from "react";
import { pricing } from "../../database";
import { Fade, Zoom } from "react-reveal";
import { PricingCard } from "../Pricing";

const Pricing = () => {
  const { email } = pricing;

  return (
    <div className="flex items-center justify-center mt-40 flex-col dark:text-white">
      <div className="hidden lg:block">
        <Zoom left cascade>
          <h1 className="font-bold text-4xl my-3">PRICING</h1>
        </Zoom>
      
        <Zoom>
          <h2>I will work according to your choice</h2>
        </Zoom>
      </div>

      <div className="lg:hidden">
        <h1 className="font-bold text-4xl my-3">PRICING</h1>
        <h2>I will work according to your choice</h2>
      </div>

      <div className="flex justify-center gap-10 bg-opacity-50 dark:text-white leading-loose ">
        <PricingCard />
      </div>
    </div>
  );
};

export default Pricing;