title: How to apply CSS and Styling to a React component
body: <p>I have been looking, however, I have had little luck finding any way to style the React.js file that I have created, I converted it from a standard web page, so I have the original CSS, however, I do not know how to use React to display the page with the proper styling.</p>
  
  <p>Any help would be appreciated!</p>
  
  <pre><code>var NavBar = React.createClass({
    render: function() {
      return (
        /* NavBar */
        &lt;div className="dark_bg_color"&gt;
          &lt;img src="logo.png" /&gt;
          &lt;div className="table_center"&gt;
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li&gt;daily specials&lt;/li&gt;
                &lt;li&gt;gift gallery&lt;/li&gt;
                &lt;li&gt;events&lt;/li&gt;
                &lt;li&gt;&lt;i className="fa fa-search" /&gt;&amp;nbsp;search&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="right_nav"&gt;
            &lt;div className="table_center"&gt;
              &lt;div&gt;
                &lt;button type="button"&gt;Sign Up&lt;/button&gt;
                &lt;button type="button"&gt;Log In&lt;/button&gt;
                &lt;div className="vertical-line"&gt;&amp;nbsp;&lt;/div&gt;
                &lt;button type="button"&gt;Cart&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;NavBar /&gt;, document.getElementById('nav'));
  
  var Gallery = React.createClass({
    render: function() {
      return (
        /* Gallery */
        &lt;div &gt;
          &lt;div align="middle"&gt;
            &lt;div id="head"&gt;
              &lt;img id="pic" align="middle" max-width="100%" src="title_pic.png" /&gt;
              &lt;div align="left" className="big"&gt;
                &lt;div&gt;
                  &lt;span&gt;Dine with the Best&lt;/span&gt;
                  &lt;div className="words"&gt;
                    &lt;span&gt;BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;button type="button"&gt;JOIN BONAPP&lt;/button&gt;&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;Gallery /&gt;, document.getElementById("Gallery"));
  
  var WhatsNew = React.createClass({
    render: function() {
      return (
        &lt;div  className="dark_bg_color"&gt;
          &lt;h2 style={{marginBottom: 30}}&gt;
            &lt;span&gt;What's New&lt;/span&gt;
          &lt;/h2&gt;
          &lt;div className="autoplay"&gt;
            &lt;img src="whatsnew0.png" /&gt;
            &lt;img src="whatsnew1.png" /&gt;
            &lt;img src="whatsnew0.png" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;WhatsNew /&gt;, document.getElementById("whatsnew"));
  
  var BonEvents = React.createClass({
    render: function() {
      return (
        /* Events */
        &lt;div id="events" className="dark_bg_color"&gt;
          &lt;div className="box"&gt;
            &lt;div className="box-text"&gt;
              &lt;div className="horizontal-line" /&gt;
              &lt;div&gt;&lt;div className="horizontal-line" /&gt;&lt;p&gt;LES BON CADEAUX&lt;/p&gt;&lt;/div&gt;
              &lt;div className="horizontal-line" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h2&gt;
            &lt;span&gt;Bon Events&lt;/span&gt;
          &lt;/h2&gt;
          &lt;div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;BonEvents /&gt;, document.getElementById("events"));
  
  var IOS = React.createClass({
    render: function() {
      /* IOS */
      return (
        &lt;div &gt;
          &lt;h2&gt;
            &lt;span /&gt;
          &lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;IOS /&gt;, document.getElementById("advertiseApp"));
  
  var Footer = React.createClass({
    render: function() {
      return (
        /* Footer */
        &lt;div&gt;
          &lt;div className="footer_center"&gt;
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li&gt;ABOUT&lt;/li&gt;
                &lt;li&gt;PRESS&lt;/li&gt;
                &lt;li&gt;CONTACT&lt;/li&gt;
                &lt;li&gt;SUPPORT&lt;/li&gt;
                &lt;li&gt;BONAPP FOR RESTAURANTEURS&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="legal_center"&gt;
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li&gt;Copyright © 2016 BonApp Dining Inc.&lt;/li&gt;
                &lt;li&gt;Privacy Policy&lt;/li&gt;
                &lt;li&gt;Legal&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;Footer /&gt;, document.getElementById("footer"));
  </code></pre>