npm 我想在移动的版禁用或启用其他样式时启用React显示

mf98qq94  于 2022-12-23  发布在  其他
关注(0)|答案(1)|浏览(134)
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;

我想缩放风格的工作只在桌面版和禁用移动的版,我正在使用的Reactjs和tailwindCSS,希望我的React显示可以与他们一起使用

ctehm74n

ctehm74n1#

你可以使用css的技巧)现在缩放是工作只有大(lg)设备

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;

相关问题